Question

我正在学习redux钩子，想知道如何将其与redux saga一起使用。

当前用saga编写的代码如下。

centers.js

wsu:Id="SecurityToken-..."

动作文件定义如下。

componentDidMount() {
    this.props.getCenters();
  }

...

<tbody>
                            {
                              this.props.centers ?
                                <React.Fragment>
                                  {
                                    centers.map((center, index) =>
                                      <tr key={index}>
                                        <td>{center.name}</td>
                                        <td>{center.zip}</td>
                                      </tr>
                                    )
                                  }
                                </React.Fragment>
                              :
                                <tr>
                                  <td> No data available</td>
                                </tr>

                            }
                          </tbody>

saga文件的定义如下。

export const getCenters = () => ({
  type: types.CENTERS_REQUEST,
});

问题是，

如果我们使用钩子，还需要redux吗？
我们如何使用钩子重写上面的代码？

Answer 1

“如果使用钩子，我们还需要redux吗？”

如果需要，可以使用useReducer钩子代替redux。但是，如果在嵌套在DOM树的不同分支中的不同组件之间具有共享状态，则使用useReducer的实现可能会有些复杂。因此，使用redux和saga与钩子并不矛盾。如果更喜欢功能组件而不是类组件，则只需要钩子即可。

“我们如何使用钩子重写上面的代码？”

您可以将类组件Centers改制成这样的功能组件：

function Centers(props) {
    useEffect(() => {
        props.getCenters();
    }, []);

    return (
        //render what you need here
    );
}

挂钩和Redux Saga

1 个答案: