I'm trying to setup Redux ToolKit to see if it will work with an idea that I have. I'm using Redux Toolkit with React Router. I'm trying to update the state within the Route Edi1 and access it from another Route Edi2. I need the Redux store to contain user content from a Text Editor onClick. I'm getting an error at the line const edicontent = useSelector((state) => state.edi.value); within my SendEdi component. The error says value is undefined but it should be set as the initial state which is just "Hello World" for now.

Error:

SendEdi.js:7 Uncaught TypeError: Cannot read properties of undefined (reading 'value')
    at SendEdi.js:7:1

I tried taking that line out to debug and I can see that the payload is being updated from console.log(dispatch(addContent(entryArray)));

So the payload is updating but I can't access it. I combed through my code and I can't find any the issues. I think I might of overlooked something when I setup my slice or configured my store but my setup seems to match up with Redux ToolKit's Quick Start Guide (https://redux-toolkit.js.org/tutorials/quick-start) so the issue is unclear to me. I checked this post and others with the same error but they seem to have gotten the error for different reasons. https://stackoverflow.com/questions/67825922/react-redux-toolkit-typeerror-cannot-read-property-value-of-undefined

Please see the SandBox to review the code. I appreciate the help. Thank you for your time!

Code: https://codesandbox.io/s/edi-forked-fw32n1?file=/src/components/SendEdi.js

CodePudding user response：

I think the error is here:

const edicontent = useSelector((state) => state.edi)

in store, you do not have edi

export const store = configureStore({
  reducer: {
    counter: ediReducer
  }
});