如何跟踪在 redux 商店中所做的更改答案

【问题标题】：How can I keep track of changes made in redux store如何跟踪在 redux 商店中所做的更改
【发布时间】：2017-02-26 01:14:49
【问题描述】：

我不想调用 store.subscribe 方法。我只想将存储状态与组件的状态同步。 I am trying to make a shopping cart - 有一个组件 CartItems 通过使用 map 函数将 props 传递给 SingleCartItem 组件来显示 SignleCartItem。

每当用户更新数量时，SignleCartItem 调度操作并存储添加到购物车的商品总数及其价格。

现在的问题是显示购物车项目的 SubTotal 和 Total 的组件没有将商店的状态与其状态（显示 total ）同步。

简单：

一个组件更新存储状态，另一个组件没有同步它在运行时。

PS：请忽略产品细节：P

【问题讨论】：

我不知道我是否理解您的问题。您是否在商店和 CartItems 组件的状态中保存相同的值（总计）？
不，我正在将总数保存在 redux 存储中，并希望将其与显示总数的其他组件同步并计算其他内容。

标签： reactjs redux react-redux

【解决方案1】：

如果我理解正确，您希望在组件中显示存储状态“总计”。您需要将组件连接到商店。 es6中的一个例子：

class SomeComponent extends React.Component{ ... }
const mapStateToProps = state => ({total:state.total});
export default connect(mapStateToProps)(SomeComponent);

关于 redux 连接功能的文档在这里： https://github.com/reactjs/react-redux/blob/master/docs/api.md

【讨论】：

实际上我没有使用连接容器。为此，我正在使用 react komposer。

【解决方案2】：

如果您想跟踪 redux 商店中所做的更改，就像您在标题中所说的那样，您可以尝试redux-logger。您将能够在您的 google chrome 控制台中看到创建的每个操作以及商店中的每个更改，就像这样

【讨论】：

【解决方案3】：

使用 react-redux 代替 store.subscribe() 将 Redux 与 React 绑定。

在您的根组件中，导入您使用createStore() 创建的商店并使用Provider 将其提供给组件

import App from './App.js'
import store from './store/index.js'
import {Provider} from 'react-redux' 

const myApp = () => (
    <Provider store={store}>
        <App />
    </Provider>
);

ReactDOM.render(<myApp />, document.getElementById("root"));

然后，在您想要监听状态的任何组件中，使用 connect 通过将它们映射到道具来连接该组件中您想要的状态部分

import {connect} from 'redux-react'

class App extends React.Component {
    render(){
        return (
            <div>
                <h1>{this.props.title}</h1>
            <div>
        )
    }
}

在导出组件之前将状态映射到道具

const mapStateToProps = (state) => {
    title: state.title
}

export default connect(mapStateToProps)(App)

【讨论】：