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

Question

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

每当用户更新数量时，SignleCartItem就会调度一个动作并存储保存添加到购物车的总物品及其价格。

现在的问题是显示商品的SubTotal和Total的组件不会将商店的状态与其状态（显示总数）同步。

简化：

  

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

PS：请忽略产品细节：P

Answer 1

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

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

关于redux connect函数的文档在这里： https://github.com/reactjs/react-redux/blob/master/docs/api.md

Answer 2

如果您想跟踪在redux商店中所做的更改，就像您在标题中所说的那样，您可以尝试redux-logger。您可以在Google Chrome控制台中查看所创建的每个操作以及商店中的所有更改，例如

Answer 3

而不是store.subscribe()使用react-redux将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)