五、Redux Toolkit 工具使用、优化redux写法

1. 安装

npm install redux
npm install react-redux
// 工具集成了dispatch函数异步请求的中间件 thunk
npm install @reduxjs/toolkit  

2. store创建configureStore

import { configureStore } from '@reduxjs/toolkit'
import counterReducer from './modules/counter'

const store = configureStore({
    // 可以传入多个分模块的reducer
    reducer: {
        counter: counterReducer
    },
    
    devTools: true, // 是否开启devTools工具
    // middleware: '', // 其他中间件（默认集成了 redux-thunk redux-devtools）
})

export default store

3. 创建reducer模块 createSlice

import { createSlice } from '@reduxjs/toolkit'

const counterSlice = createSlice({
    name: 'counter',
    initialState: {
        counter: 90
    },
    // 类似于原始写法中的一个个case语句， 根据action修改state
    reducers: {
        incrementNumber(state, action) {
            state.counter = state.counter + action.payload
        },
        decrementNumber(state, action) {},
    }
})

export const {incrementNumber, decrementNumber}  = counterSlice.actions
export default counterSlice.reducer

4. 在某个组件中使用

4.1 入口index.js文件配置

import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux'
import store from './store'

import App from './App';

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

4.2组件中使用

import React, { PureComponent } from "react";
import { connect } from "react-redux";

import { incrementNumber, decrementNumber } from "../store/modules/counter";
import { asyncFetchRecommends } from "../store/modules/recommends";

export class home extends PureComponent {
  increment(num) {
    this.props.incrementNumber(num);
  }
  decrement(num) {
    this.props.decrementNumber(num);
  }
  componentDidMount() {
    // 发送异步请求
    this.props.asyncGetRecommends();
  }
  render() {
    const { counter, recommends } = this.props;
    return (
      <div className="wrap">
        <h2>{counter}</h2>
        <button onClick={() => this.increment(10)}>+</button>
        <button onClick={() => this.decrement(8)}>-</button>
        <ul>
          {recommends.map((item) => {
            return <li key={item}>{item}</li>;
          })}
        </ul>
      </div>
    );
  }
}

const mapStateToProps = (state) => ({
  counter: state.counter.counter,
  recommends: state.recommends.recommends,
});
const mapDispatchToProps = (dispatch) => ({
  incrementNumber(num) {
    dispatch(incrementNumber(num));
  },
  decrementNumber(num) {
    dispatch(decrementNumber(num));
  },
  asyncGetRecommends() {
    dispatch(asyncFetchRecommends());
  },
});

export default connect(mapStateToProps, mapDispatchToProps)(home);

4.3 异步recommends

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

// 异步请求单独书写
export const asyncFetchRecommends = createAsyncThunk('recommendsName', async(a, {dispatch})=>{
    const res = await axios.get("XXXXX")
    const recommends = res.data.data.recommend.list;
    
    // 拿到结果直接触发
    dispatch(changeRecommends(recommends))
})

const recommendSlice = createSlice({
    name: 'recommends',
    initialState: {
        recommends: []
    },
    reducers: {
        changeRecommends(state, action) {
          state.recommends = action.payload
        }
    },
    extraReducers: {
        // 监听异步请求的三种状态
    }
})

export const {changeRecommends} = recommendsSlice.actions
export default recommendsSlice.reducer