react-redux-toolkit学习

react-redux负责状态管理，使用toolkit插件可以更方便，具体使用方式简单总结一下。
toolkit官网

安装redux

使用toolkit的需要配置react-redux一起使用。

npm install react-redux@latest
npm install @reduxjs/toolkit

使用toolkit的步骤

1. 配置一个reduxStore

import { configureStore } from '@reduxjs/toolkit';
export const store = configureStore({
    reducer: {},
});

2. 把store发布到react项目中

import { Provider } from 'react-redux';
import { store } from './app/store';
import App from './App';

ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById('root')
);

3. 创建不定量的 redux state slice
   创建不同的slice.js

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

const initialState = {
    value: 0,
};

export const counterSlice = createSlice({
    name: 'counter',
    initialState,
    reducers: {
        increment: (state) => {
            state.value += 1;
        },
        decrement: (state) => {
            state.value -= 1;
        },
        incrementByAmount: (state, action) => {
            state.value += action.payload;
        },
    },
});
//Action creators are generated for each case reducer function
export const { increment, decrement, incrementByAmount } = counterSlice.actions
export default counterSlice.reducer

4. 把 slice reducers 添加到 store 中
   next, we need add slice to our store. By defining a field inside the reducer parameter, we tell the store to use this slice reducer function to handle all updates to that state.

import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counter/counterSlice'
export const store = configureStore({
    reducer: {
        counter: counterReducer,
    },
});

5. 在组件中使用state和actions

import React from 'react';
import {useSelector, useDispatch} from 'react-redux';
import {increment, decrement} from './counterSlice';

export function Counter() {
    //从store中选择所需要的对应的 state
    const count = useSelector((state) => state.counter.value);
    const dispatch = useDispatch();

    return (
        <div>
            <div>
                <button 
                    aria-label="Increment value"
                    onClick={() => dispatch(increment())}
                >
                    Increment
                </button>
                <span>{count}</span>
                <button 
                    aria-label="Decrement value"
                    onClick={() => dispatch(decrement())}
                >
                    Decrement
                </button>
            </div>
        </div>
    );
}

总结：

1. 使用 toolkit 配置一个空状态管理仓库： store
2. 将刚配置的空的状态管理仓库配合 react-redux中的 Provider 使用到项目中，一般需要将 Provider 包裹在项目的最顶层父级元素外，这样可以保证这个store能够存储项目内的所有state.
3. 使用toolkit中createSlice创建每个state对应的actions（一般一个状态的reducer放置在一个单独的文件中，便于管理和查看）
4. 把第3步创建好的不定量个数的reducer配置到第1步创建的store中。
5. 在项目中使用react-redux中提供的useSelector和useDispatch分别负责从store中获取对应的state以及触发改变state的动作函数reducer.

注意：若state的动作函数是一个异步请求，则第3步中需要使用createAsyncThunk来创建state对应的action:

import { createAsyncThunk, createSlice } from '@reduxjs/toolkit'
import { userAPI } from './userAPI'

// First, create the thunk
const fetchUserById = createAsyncThunk(
  'users/fetchByIdStatus',
  async (userId, thunkAPI) => {
    const response = await userAPI.fetchById(userId)
    return response.data
  }
)

// Then, handle actions in your reducers:
const usersSlice = createSlice({
  name: 'users',
  initialState: { entities: [], loading: 'idle' },
  reducers: {
    // standard reducer logic, with auto-generated action types per reducer
  },
  extraReducers: (builder) => {
    // Add reducers for additional action types here, and handle loading state as needed
    builder.addCase(fetchUserById.fulfilled, (state, action) => {
      // Add user to the state array
      state.entities.push(action.payload)
    })
  },
})

// Later, dispatch the thunk as needed in the app
dispatch(fetchUserById(123))