After setting up redux in this manner, everything is functioning properly.
The _app.js file has been reorganized as follows :
import App from 'next/app';
import { Provider } from 'react-redux';
import withRedux from 'next-redux-wrapper';
import store from '../redux/store';
import React from 'react';
class MyApp extends App {
static async getInitialProps({ Component, ctx }) {
const appProps = Component.getInitialProps ? await Component.getInitialProps(ctx) : {};
console.log(appProps);
return {
appProps: appProps
};
}
render() {
const { Component, appProps } = this.props;
return (
<Provider store={store}>
<Component {...appProps} />
</Provider>
);
}
}
const makeStore = () => store;
export default withRedux(makeStore)(MyApp);
This is the index.js file which has been linked to redux :
import { connect } from 'react-redux';
import { callAction } from '../redux/actions/main';
const Index = (props) => {
console.log(props);
return (
<div>
State of Index js <button onClick={() => props.callAction()}>Call action</button>
</div>
);
};
const mapStateToProps = (state) => ({
name: state.main.name
});
const mapDispatchToProps = {
callAction: callAction
};
export default connect(mapStateToProps, mapDispatchToProps)(Index);
This is the rootReducer file which only contains one reducer named main :
import { main } from './main';
import { combineReducers } from 'redux';
export const rootReducer = combineReducers({
main: main
});
And here is the store.js file :
import { createStore } from 'redux';
import { rootReducer } from './reducers/rootReducer';
const store = createStore(rootReducer);
export default store;
Everything is functioning correctly but there is a warning displayed in the console saying:
/!\ You are using legacy implementaion. Please update your code: use createWrapper() and wrapper.withRedux().What specific changes need to be made to which files in order to resolve the legacy implementation warning?