SHELL

redux

################# Installation ###################
### Redux Toolkit ###
npm install @reduxjs/toolkit

### Redux Core ###
npm install redux

### Complementary Packages ###
npm install react-redux
npm install --save-dev @redux-devtools/core

### Create a React Redux App ###
# Redux + Plain JS template
npx create-react-app my-app --template redux
# Redux + TypeScript template
npx create-react-app my-app --template redux-typescript

redux

//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>
);

redux

> npm install @reduxjs/toolkit react-redux

# then follow along from here to install RTK to codebase
# https://redux-toolkit.js.org/tutorials/quick-start#create-a-redux-store

redux

npm i redux react-redux
aka

redux

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;

redux

Use Redux tool kit

redux

# NPM
npm install @reduxjs/toolkit

# Yarn
yarn add @reduxjs/toolkit

redux

// component.js
showNotificationWithTimeout(this.props.dispatch, 'You just logged in.')

// otherComponent.js
showNotificationWithTimeout(this.props.dispatch, 'You just logged out.')  
复制代码

redux

Redux is a predictable state container for JavaScript apps.