Question

Redux手册说每个reducer应该是一个纯函数，甚至不应该进行API调用，然后我很想知道，那么，什么时候应该有机会将我的App状态树保存到外部存储或后端？

Answer 1

您不应该将它作为减速器的一部分。

相反，每当您要保存状态的某些部分时，都应调度一个异步操作（借助redux-thunk之类的中间件），该操作可能称为SAVE_XYZ，其有效负载是操作的一部分。您要保存的商店。

dispatch(saveXYZ(data))

saveXYZ必须是一个async action creator，它将分派API调用以保留您的数据并相应地处理响应。

const saveXYZ = payload => dispatch => {
    dispatch(saveXYZPending());
    return apiCallToStore(...)
             .then(data => saveXYZDone())
             .catch(err => saveXYZError());
}

您可以在async actions上了解更多信息以及如何处理它们。

Answer 2

您可以使用Redux Thunk中间件和操作来保存您的redux存储。

假设用户要在用户单击“保存”时保存商店。首先，定义一个操作进行保存：

actions / save.js 从'isomorphic-fetch'导入提取

export const save = state => {
    return () => {
        fetch('/api/path/to/save', {
            body: JSON.stringify(state), 
            headers: {
                'content-type': 'application/json'
            }
            method: 'POST'
        }
    }
}

然后在您的组件中：

components / SaveButton.js

import React from 'react'
import { connect } from 'react-redux';
import { save } from '../actions/save'

const SaveButton = props => {
    let { onSave, state } = props

    return <button onClick={onSave(state)}>Save</button>
}

const mapStateToProps = state => {
    return {state}
}

const mapDispatchToProps = dispatch => {
    return {
        onSave: state => dispatch(save(state))
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(SaveButton)

Answer 3

两种基本方法：

使用store.subscribe(callback)，并编写一个获取最新状态的回调，并在分派某些操作后将其保持不变
编写一种在满足某些条件时可保持状态不变的中间件

有dozens of existing Redux store persistence libraries available会为您完成这项工作。

什么时候保存状态树？

3 个答案: