xxxxxxxxxx
//create store-------------------------------
import {applyMiddleware, createStore} from 'redux';
import thunk from 'redux-thunk'
import rootReducer from './rootReducer';
import { composeWithDevTools } from 'redux-devtools-extension';
const middleware =[thunk]
const store = createStore(rootReducer, composeWithDevTools(applyMiddleware(middleware) ));
export default store;
//create rootreducer-------------------------------
import { combineReducers } from "redux";
// create root reducer
const rootReducer = combineReducers({
product: "",
category: ''
})
export default rootReducer;
//Add provider------- index.js
import { Provider } from "react-redux";
import store from "./redux/store";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
<BrowserRouter>
<Provider store={store}>
<App />
</Provider>
</BrowserRouter>
</React.StrictMode>
);
xxxxxxxxxx
import { createStore, applyMiddleware, compose } from "redux";
import reducers from "./reducers";
import thunk from "redux-thunk";
const composeEnhancers = process.env.NODE_ENV !== "production" &&
typeof window === "object" && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}) : compose;
const enhancer = composeEnhancers(applyMiddleware(thunk));
const initialState = {};
const store = createStore(reducers, initialState, enhancer);
export default store;
xxxxxxxxxx
// component.js
showNotificationWithTimeout(this.props.dispatch, 'You just logged in.')
// otherComponent.js
showNotificationWithTimeout(this.props.dispatch, 'You just logged out.')
复制代码
xxxxxxxxxx
Redux provides a centralized store that holds the application state. This makes it easy to access and update the state from any component in your Next. js application. With Redux, you can keep the state in a single location, making it easier to manage and debug.