redux之redux-toolkit

由于redux的各种规范与插件异常繁琐，所以官方推出了redux-toolkit这个库来简化redux的使用

安装

npm install @reduxjs/toolkit

使用

目录

一般我们创建store文件夹，来进行状态的管理

index.js

import { configureStore } from '@reduxjs/toolkit';
import counterSlice from './features/counterSlice';

export default configureStore({
    reducer: {
        counter: counterSlice
    },
});

counterSlice.js

import { createSlice } from '@reduxjs/toolkit';

export const counterSlice = createSlice({
    name: 'counter', 
    initialState: {
        count: 1,
    },
    reducers: {
        increment(state, { payload }) {
            state.count = state.count + payload.step; 
        },
        decrement(state) {
            state.count -= 1;
        },
    },
});

export const { increment, decrement } = counterSlice.actions;

export const asyncIncrement = (payload) => (dispatch) => {
    setTimeout(() => {
        dispatch(increment(payload));
    }, 2000);
};

export default counterSlice.reducer; 

组件

import { useSelector, useDispatch } from 'react-redux';

import { increment, asyncIncrement } from '../toolkit-store/features/counterSlice'; 

function App() {
    const { count } = useSelector((state) => state.counter);
    const dispatch = useDispatch();
    return (
        <div className='App'>
            <button
                onClick={() => {
                    dispatch(increment({ step: 2 })); 
                }}
            >
                {count}
            </button>
            <hr />
            <button
                onClick={() => {
                    dispatch(asyncIncrement({ step: 1 }));
                }}
            >
                {count}
            </button>
        </div>
    );
}

export default App;

入口文件

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

代码解释

index.js

• 一般我们用configureStore来创建一个状态管理器，相关的额参数点击
• 其中reducer后面可以跟一个对象，对象中包含的是通过createSlice创建reducer，他会被redux的combineReducer一起添加到跟容器中
• 创建的官网解释 点击
• 快速开始 官网

counterSlice.js

主要是定义状态和修改状态的方法

1. 在createSlice中，我们没必要返回一个新的state，我们只需要改变其中的属性就可以，相关参数请点击，函数返回一个对象，对象中含有actions和reducer属性
2. 创建切片需要name属性来标识切片
3. 需要初始状态值
4. 需要一个或多个reducers函数来定义更新状态的行为

组件

在组件中，我们最常用的两个api是useSelector, useDispatch 他是react-redux的方法

• 第一个方法用来取出状态，第二个方法用来取出修改状态的行为

组件中的异步

redux-toolkit 已经支持异步，其内部还有thunk插件，注意他是一个高级函数