Question

我已经确定了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())
            }
            ...
    }
}

OR

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）。那么，什么是最好的＆＃34;方式是什么？

Answer 1

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

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

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

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

我认为在制作之前检查缓存数据是可以接受的请求，或检查您是否经过身份验证（在其他情况下）单词，做条件派遣）

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

...很难追踪那些不正确的值来自哪里因为他们已经是行动的一部分，而不是直接由reducer计算以响应某个动作。

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

不是：

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

<强>可是：

我们需要删除ID为item的{{1}} - 处理它

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

Redux模式获取状态在行动创作者

1 个答案: