react-native - 用于在 Action 创建者中获取状态的Redux模式

我确定了两种在动作创建者中获取状态的模式，并且想知道哪种更好：


使用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是个坏主意，因为它涉及将状态传递给Component只是将其传递回Redux。但是，网上似乎有很多文章说选项1是反模式（包括Dan Abramov himself saying it is an anti-pattern）。那么，什么是“最佳”方式？

最佳答案

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

回到丹·阿布拉莫夫的答案。他在评论中说：


可以从动作创建者的商店中读取内容。


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


我认为在您进行
请求，或用于检查您是否通过了身份验证（其他
话，进行有条件的调度）


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


...很难追踪那些不正确的值来自何处
因为它们已经是行动的一部分，而不是直接
归约器根据动作计算的结果。


我认为他的意思是，动作创建者不应传递由reducer替换的商店的更新部分，而动作应描述正在发生的事情，reduce应当处理更新：

不：


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


但：


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


...与从存储区访问值以在请求中使用它的情况有些不同。我advice you to read the linked blog。它回答了您的深层问题，并且有一些关于最佳实例的争论。 TL; DR-争论哪种方法更好。

关于react-native - 用于在 Action 创建者中获取状态的Redux模式，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49456204/