I would go through your components and make sure you have only one <Router> … </Router>. Also — make sure you have a <Router>…</Router> There may be cases when you’d use more than one, but if you accidentally have nested routers (because you were hacking quickly and forgot to remove one when you were moving … Read more
Mutating state is an anti-pattern in React. React uses a rendering engine which depends on the fact that state changes are observable. This observation is made by comparing previous state with next state. It will alter a virtual dom with the differences and write changed elements back to the dom. When you alter the internal … Read more
Solution You need to use the current function in order to see the actual value of the state. In your reducer, you can call: console.log(current(state)); This current function comes from the Immer package which is a dependency of Redux Toolkit. It is re-exported by Redux Toolkit, so it can be imported from either package: import … Read more
You’ve got everything hooked up correctly, but you’re missing one key concept for Redux: With Redux, you never mutate any part of state. From the Redux guide: Things you should never do inside a reducer: Mutate its arguments; Perform side effects like API calls and routing transitions; Call non-pure functions, e.g. Date.now() or Math.random(). In … Read more
Provider, passes the store to the component nested within it and generally only needed to be applied to the root component (in your case <RootContainer> connect connect with the component providing store and not the component that has store provided to it. SUGGESTED SOLUTION: MOVE the connect to the <RootContainer> component file instead, and pass … Read more
Another way to go is to use JSON Web Tokens (JWT) that are required for each route, and localStorage to check for the JWT. TL;DR On the front end you have a signin and signup route that queries your server for a JWT according to the authentication on the server. Once passed the appropriate JWT … Read more
It needs to be the second argument to createStore: const rootReducer = combineReducers({ todos: todos, visibilityFilter: visibilityFilter }); const initialState = { todos: [{id:123, text:’hello’, completed: false}] }; const store = createStore( rootReducer, initialState );
EDIT: create-react-app v2 now have the service worker disabled by default This answer only apply for CRA v1 This is probably because of your web worker. If you look into your index.js file you can see registerServiceWorker(); Never wondered what it did? If we take a look at the file it got imported from we … Read more
The Promise approach export default function createUser(params) { const request = axios.post(‘http://www…’, params); return (dispatch) => { function onSuccess(success) { dispatch({ type: CREATE_USER, payload: success }); return success; } function onError(error) { dispatch({ type: ERROR_GENERATED, error }); return error; } request.then(success => onSuccess, error => onError); }; } The async/await approach export default function createUser(params) … Read more
The API provides component for this purpose. <Button variant=”contained” component=”label” > Upload File <input type=”file” hidden /> </Button>