Redux Toolkit的基本使用示例详解(Redux工具包)

import { configureStore } from "@reduxjs/toolkit"

// 导入reducer
import counterReducer from "./features/counter"

const store = configureStore({
  reducer: {
    counter: counterReducer
  },
  // 例如可以关闭redux-devtool
  devTools: false
})

export default store

import { createSlice } from "@reduxjs/toolkit"

const counterSlice = createSlice({
  name: "counter",
  initialState: {
    counter: 99
  },
  reducers: {
    // 直接对actions解构拿到payload
    changeNumber(state, { payload }) {
      state.counter = state.counter + payload
    }
  }
})

// reducers当中的方法会放在counterSlice的actions中, 用于派发action
export const { changeNumber } = counterSlice.actions

// 注意: 导出的是reducer, 用于在index.js中对reducer进行组合
export default counterSlice.reducer

import React, { PureComponent } from 'react'
import { connect } from 'react-redux'
import { changeNumber } from '../store/features/counter'

export class Home extends PureComponent {
  changeNumber(num) {
    this.props.changeNumber(num)
  }

  render() {
    const { counter } = this.props

    return (
      <div>
        <h2>Home</h2>
        <h2>当前计数: {counter}</h2>
        <button onClick={() => this.changeNumber(5)}>+5</button>
        <button onClick={() => this.changeNumber(10)}>+10</button>
      </div>
    )
  }
}

// 映射要使用的store中的数据
const mapStateToProps = (state) => ({
  counter: state.counter.counter
})
// 映射要派发的方法
const mapDispatchToProps = (dispatch) => ({
  changeNumber(num) {
    dispatch(changeNumber(num))
  }
})

export default connect(mapStateToProps, mapDispatchToProps)(Home)