如何在 React class 组件中使用 redux-toolkit createSlice

Question

我已经开始在功能组件中使用 redux-toolkit 切片器，（来自 react-redux 示例的示例）

切片器：

export const counterSlice = createSlice({
  name: 'counter',
  initialState: {
    value: 0,
  },
  reducers: {
    increment: state => {
      state.value += 1;
    },
    decrement: state => {
      state.value -= 1;
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload;
    },
  },
});

在组件中使用：

const count = useSelector(selectCount);
const dispatch = useDispatch();

return (
  <button
    className={styles.button}
    aria-label="Increment value"
    onClick={() => dispatch(increment())}
  >
)

我的问题是如何在 class 组件中使用此切片器，因为我无法在其中使用挂钩。我试过使用 connect（来自 redux），但我找不到将切片器中的动作和选择器“缝合”到我的组件的方法。我也找不到任何相关文档。

Answer 1

Class vs. 函数组件和 redux-toolkit vs “vanilla” redux 是两个独立的决定，彼此没有任何影响。（尽管你应该知道，对于所有 React，函数组件和钩子比 class 组件更推荐）。

I've tried using connect (from redux) but I can't find a way to "stitch" the actions and selectors from the slicer to my component.

文档如何在使用 useDispatch 和 useSelector 时“缝合”操作和选择器？这样做，但使用 connect 高阶组件代替。

您发布的文档示例中的 increment() 函数并非神奇地存在，它需要从切片中导入。您可以导出整个 actions 对象并使用 actions.increment，但您通常会看到导出为单个变量的操作。

来自 the docs:

Most of the time, you'll probably want to use ES6 destructuring syntax to pull out the action creator functions as variables, and possibly the reducer as well:

您的切片文件可能如下所示：

const counterSlice = createSlice( /* same as before */ );

// destructure actions and reducer from the slice (or you can access as counterSlice.actions)
const { actions, reducer } = counterSlice;

// export individual action creator functions
export const { increment, decrement, incrementByAmount } = actions;

// often the reducer is a default export, but that doesn't matter
export default reducer;

connect 的第一个参数是 mapStateToProps，您可以在其中使用选择器（内联箭头函数 state => state.something 或您导入的选择器函数）从状态。这可能看起来像：

const mapStateToProps = (state) => ({
  count: state.counter.value
});

第二个参数 mapDispatchToProps 是可选的。如果您将一个对象传递给您的动作创建者，您的组件将接收已经绑定到 dispatch 的那些动作创建者的版本。您可以直接调用 this.props.increment() 而不是 this.props.dispatch(increment())。您将在 connect.

教程中看到这种常用语法

import React from "react";
import { connect } from "react-redux";
import { increment, decrement } from "./counterSlice";

class MyComponent extends React.Component {
  render() {
    return (
      <div>
        <h1>Count is {this.props.count}</h1>
        <button onClick={() => this.props.increment()}>
          Increment
        </button>
        <button onClick={() => this.props.decrement()}>
          Decrement
        </button>
      </div>
    );
  }
}

const mapStateToProps = (state) => ({
  count: state.counter.value
});

const mapDispatchToProps = { increment, decrement };

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

如果您完全放弃 mapDispatchToProps 参数，您的组件将接收原始 dispatch 函数。你会调用像 this.props.dispatch(increment()) 这样的导入动作创建者的调度。此语法更类似于 useDispatch 的使用方式。 connect 和 useDispatch 都允许您访问 dispatch 函数，您可以使用从动作创建者函数创建的动作调用该函数，例如 increment() 或 decrement().

import React from "react";
import { connect } from "react-redux";
import { increment, decrement } from "./counterSlice";

class MyComponent extends React.Component {
  render() {
    return (
      <div>
        <h1>Count is {this.props.count}</h1>
        <button onClick={() => this.props.dispatch(increment())}>
          Increment
        </button>
        <button onClick={() => this.props.dispatch(decrement())}>
          Decrement
        </button>
      </div>
    );
  }
}

const mapStateToProps = (state) => ({
  count: state.counter.value
});

export default connect(mapStateToProps)(MyComponent);

Complete CodeSandbox

如何在 React class 组件中使用 redux-toolkit createSlice

How to use redux-toolkit createSlice with React class components

reactjs

redux

react-redux

redux-toolkit