如何在React类组件中使用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())}
>
)

我的问题是我如何在类组件中使用这个切片器，因为我不能在它们内部使用钩子。我试过使用connect (from redux)，但我找不到"缝合"的方法。从切片器到组件的操作和选择器。我也找不到任何关于这个的文档。

Answer 1

类与功能组件，redux-toolkit与'香草';Redux是两个独立的决定，彼此之间没有任何影响。(尽管你应该意识到，在React中，函数组件和钩子比类组件更被推荐)。

我试过使用connect (from redux)，但我找不到方法来"缝合";从切片器到组件的操作和选择器。

文档如何"缝合"?使用useDispatch和useSelector时的动作和选择器?这样做，但用connect高阶分量代替。

您发布的docs示例中的increment()函数并不只是神奇地存在，它需要从片中导入。您可以导出整个actions对象并使用actions.increment，但您通常将动作导出为单独的变量。

From the docs:

大多数情况下，您可能希望使用ES6解构语法来提取操作创建器函数作为变量，也可能是减法函数:

您的切片文件可能看起来像这样:

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或您导入的选择器函数)从状态创建props对象。它可能看起来像:

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);

完成CodeSandbox