用于在动作创建者中获取状态的 Redux 模式答案

【问题标题】：Redux pattern for getting state in action creator用于在动作创建者中获取状态的 Redux 模式
【发布时间】：2018-09-02 12:24:08
【问题描述】：

我已经确定了在动作创建器中获取状态的 2 种模式，我想知道哪种模式更好：

使用 redux-thunk 和 getState
组件中的mapStateToProps，并在调用动作创建者时将状态传回Redux

每个示例：

class SomeComponent {
    render() {
        return (
            <Button onPress={this.props.networkCall}/>
        )
    }
}

const mapDispatchToProps = {
    networkCall: actions.networkCall,
}

export default connect(undefined, mapDispatchToProps)(SomeComponent)

export networkCall() {
    return (dispatch, getState) => {
        const { dataForNetworkCall } = getState().someReducer
        dispatch(pending())
        axios.get(`something/${dataForNetworkCall}/something2`)
            .then(() => {
                dispatch(success())
            }
            ...
    }
}

或

class SomeComponent {
    render() {
        const { networkCall, dataForNetworkCall } = this.props
        return (
            <Button onPress={networkCall(dataForNetworkCall)}/>
        )
    }
}

function mapStateToProps(state) {
    const { dataForNetworkCall } = state.someReducer
    return { dataForNetworkCall }
}

const mapDispatchToProps = {
    networkCall: actions.networkCall,
}

export default connect(mapStateToProps, mapDispatchToProps)(SomeComponent)

export networkCall(dataForNetworkCall) {
    return (dispatch) => {
        dispatch(pending())
        axios.get(`something/${dataForNetworkCall}/something2`)
            .then(() => {
                dispatch(success())
            }
            ...
    }
}

我觉得 2 是个坏主意，因为它涉及将状态传递给组件，只是为了将其传递回 Redux。但是，网上似乎有很多文章说选项 1 是一种反模式（包括Dan Abramov himself saying it is an anti-pattern）。那么，“最好”的方式是什么？

【问题讨论】：

标签： react-native redux react-redux redux-thunk

【解决方案1】：

我始终遵循后一个示例，这意味着我的动作创建者不依赖于store。但是，有一种情况是我必须将用户令牌传递给几乎所有需要与服务器 API 交互的操作。我没有将它反复传递给每个动作创建者或使用 getState() 在内部访问它，而是编写了一个自定义中间件（不是那么困难），它可以识别这些动作并使用另一个名为 userToken 的道具来丰富它们。

回到 Dan Abramov 的答案。他在评论中说：

从动作创建器中的存储读取就可以了。

这让我感到困惑，但我认为他的意思是出于某些原因这样做很好：

我认为在创建之前检查缓存数据是可以接受的请求，或检查您是否已通过身份验证（在其他话，做一个有条件的调度）

...而使用getState 可能会导致以下情况：

...很难追踪这些错误值的来源因为它们已经是动作的一部分，而不是直接由 reducer 计算以响应操作。

我认为他的意思是动作创建者不应该传递被reducer替换的更新部分，但动作应该描述正在发生的事情并且reducer应该处理更新：

不是：

这是新的item 列表 - 在商店中替换它

但是：

我们需要删除 id 为 item 的 5 - 处理它

...这与从存储中访问值以在请求中使用它有点不同。我advice you to read the linked blog。它深入回答了你的问题，并且有一些关于什么是最好的例子的争论。 TL;DR - 争论哪种方法更好。

【讨论】：