The signature for the function passed to wrapper.getServerSideProps has changed in next-redux-wrapper v7.x. Replace the following. export const getServerSideProps = wrapper.getServerSideProps(async ({req, store}) => { // Code here }) With the right signature. export const getServerSideProps = wrapper.getServerSideProps((store) => async ({ req }) => { // Code here })
connect state on your Child components Using connect on child components has the following advantages: Your parent component need not bother about connecting all the props required by its children even though the parent itself is not using the prop. Child components become more reusable, and easily maintainable. Avoids passing down props blindly from parent … Read more
Instead of using BrowserRouter you could use the Router with custom history like import { Router } from ‘react-router’ import createBrowserHistory from ‘history/createBrowserHistory’ export const history = createBrowserHistory() <Router history={history}> <App/> </Router> in which case your history.push() will work. With BrowserRouter history.push doesn’t work because Creating a new browserHistory won’t work because <BrowserRouter> creates its … Read more
Problem is in the import statements. You have not used curly braces while importing some components like createHistory. If a component uses a default export like: export default X Then you can simply import it like: import X from ‘./X’; But if you are using a named export like: export const X=1; Then you need … Read more
No, you should not store function references in the redux store. They are not serializable, and as you mentioned state should be serializable at all times. The most redux-friendly approach I can think of is just to keep the map of hotkeys to their actionCreatorFuncNames.
component should be updated to receive new props. there are ways to achieve your goal: 1. componentDidUpdate check if value is changed, then do something.. componentDidUpdate(prevProps){ if(prevProps.value !== this.props.value){ alert(prevProps.value) } } 2. redux-promise ( middleware will dispatch the resolved value of the promise) export const updateState = (key, value)=> Promise.resolve({ type:’UPDATE_STATE’, key, value }) … Read more
To fix this issue simply upgrade react-scripts package (check latest version with npm info react-scripts version): Replace in your package.json “react-scripts”: “^3.x.x” with “react-scripts”: “^3.4.1” (or the latest available version) (optional for some) Delete your node_modules folder Run npm install or yarn install Some people reported that this issue was caused by running npm audit … Read more
Edit: With the introduction of Hooks it is possible to implement a lifecycle kind of behavior as well as the state in the functional Components. Currently Hooks are a new feature proposal that lets you use state and other React features without writing a class. They are released in React as a part of v16.8.0 … Read more
I think you don’t need to. (Sorry for a dismissive answer but it’s the best solution in my experience.) Store is the source of truth for your data. This is fine. If you use React Router, let it be the source of truth for your URL state. You don’t have to keep everything in the … Read more
TL;DR Without combineReducers() or similar manual code, initialState always wins over state = … in the reducer because the state passed to the reducer is initialState and is not undefined, so the ES6 argument syntax doesn’t get applied in this case. With combineReducers() the behavior is more nuanced. Those reducers whose state is specified in … Read more