react中使用 @reduxjs/toolkit react-redux

安装依赖

npm i @reduxjs/toolkit react-redux
或者
yarn add @reduxjs/toolkit react-redux

下面以计数器为例

在项目根目录下创建 store文件，在store文件夹下创建 modules 文件夹用于存放不同的状态函数 在mudules下创建counterStore.js

import {
    createSlice
} from "@reduxjs/toolkit"

const counterStore = createSlice({
    name: "counter",
    initialState: {
        count: 0
    },
    reducers: {
        add(state, ) {
            state.count++
        },
        dec(state) {
            state.count--
        },
        addNum(state, action) {
            // 传参
            state.count = state.count + action.payload
        },
    }
})

const {
    add,
    dec,
    addNum
} = counterStore.actions
const reducer = counterStore.reducer
export {
    add,
    dec,
    addNum
}

export default reducer

在store中 index.js 合并modules下的方法并导出

import {
    configureStore
} from "@reduxjs/toolkit"
import counterReducer from "./modules/counterStore"

const store =configureStore({
    reducer:{
        counter:counterReducer
    }
})

export default  store

在入口文件index.js中全局引入 store

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import store from "./store"
import { Provider } from 'react-redux';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Provider store={store}>
       <App />
    </Provider>
  </React.StrictMode>
);

reportWebVitals();

使用 钩子函数 useSelector 映射到组件中

import './App.css';
import { useSelector,useDispatch } from 'react-redux';
import{add,dec,addNum} from "./store/modules/counterStore"

function App() {
  // 获取store中的值
  const {count} =useSelector(state=>state.counter)
  const dispatch=useDispatch()
  return (
    <div className="App">
      <button onClick={()=>dispatch(dec())}>-</button>
    
      {count}
       <button onClick={()=>dispatch(add())}>+</button>
       <button onClick={()=>dispatch(addNum(10))}>+10</button>
    </div>
  );
}

export default App;

第二个参数

import { shallowEqual } from 'react-redux';

// 使用浅比较避免不必要的重新渲染
const { firstName, lastName } = useSelector(
  state => ({
    firstName: state.user.firstName,
    lastName: state.user.lastName
  }),
  shallowEqual  // 浅比较返回的对象
);