React学习之RdeuxToolkit

安装

需要安装两个包——react-redux和reduxjs/toolkit

npm i @reduxjs/toolkit react-redux

先创建一个slice

//  src/store/counter/index.js

import { createSlice } from "@reduxjs/toolkit";
const counterSlice = createSlice({
    // 标记slice，在redux-devtools中也能看到
    name: 'counter',
    // 初始值
    initialState: {
        counter: 0
    },
    // 相当于之前的reducer函数
    reducers: {
        addNumber(state, action) {
            state.counter += action.payload
        },
        subNumber(state, action) {
            state.counter -= action.payload
        }
    }
})

export const { addNumber, subNumber } = counterSlice.actions

export default counterSlice.reducer

创建store

// src/store/index.js
// configureStore 用于创建store对象
import { configureStore } from "@reduxjs/toolkit";
// 这里是上边创建的slice
import counterReduter from "./counter";
const store = configureStore({
    reducer: {
        counter: counterReduter
    }
})
export default store

在index.jsx中引用

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

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

在名为About的子组件中使用

// About.jsx

import React, { PureComponent } from 'react'
// 导入connect方法，用于连接React组件到Redux store  
import { connect } from 'react-redux'
// 导入上边counterSlice中的addNumber动作
import { addNumber } from '../src/store/counter'
export class About extends PureComponent {
    changeNumber(num) {
    //这里是 mapDispath 中的addNumber方法
        this.props.addNumber(num)
    } 
    render() {
    // 这里是 mapState 中的来自couterSLice中的counter
        const { counter } = this.props
        return (
            <div>About
                <h2>{counter}</h2>
                <button onClick={e => this.changeNumber(10)}> +10 </button>
            </div>
        )
    }
}

// 映射state，用于从Redux store中获取state并映射到props，以供About组件使用
const mapState = (state) => ({
    counter: state.counter.counter,
})
// 映射dispatch，用于将Redux的dispatch方法映射到props中，这样About组件才能调用
const mapDispath = (dispatch) => ({
    //  定义一个addNumber方法，该方法接受一个参数num，并触发addNumber动作  
    // 这里名字取成一样的了，addNumber被传递到props中，用于About组件使用，dispatch()中的是来自于couterSlice，之后使会加上一个action便于区分
    addNumber(num) {
        dispatch(addNumber(num))
    },
})
export default connect(mapState, mapDispath)(About)

效果

不管是RTK还是redux都有点博大精深了，我这菜鸟还是要慢慢学，有点想念Pinia了哈哈。