Блог

Главная - Вопросы по программированию - Как я могу отслеживать изменения, внесенные в хранилище redux

Как я могу отслеживать изменения, внесенные в хранилище redux

#reactjs #redux #react-redux

#reactjs #redux #реагировать-redux

Вопрос:

Я не хочу вызывать метод store.subscribe. Я просто хочу синхронизировать состояние хранилища с состоянием компонента. Я пытаюсь создать корзину покупок — есть компонент cartItems, который отображает SignleCartItem, передавая реквизиты компоненту SingleCartItem с помощью функции map.

Всякий раз, когда пользователь обновляет количество SignleCartItem отправляет действие, и магазин сохраняет общее количество товаров, добавленных в корзину, и их цену.

Теперь проблема заключается в том, что компонент, который отображает промежуточный итог и общее количество товаров в корзине, не синхронизирует состояние магазина с его состоянием (которое отображает общее количество).

Сделать это просто:

Один компонент обновляет состояние хранилища, другой компонент не синхронизирует его во время выполнения.

PS: Пожалуйста, не обращайте внимания на детали продукта: P

Комментарии:

1. Я не знаю, понял ли я вашу проблему. Сохраняете ли вы одно и то же значение (общее) как в хранилище, так и в состоянии компонента cartItems?

2. нет, я сохраняю общее количество в хранилище redux и хочу синхронизировать его с другим компонентом, который отображает общее количество элементов и вычисляет другие вещи.

Ответ №1:

Если я вас правильно понял, вы хотите показать состояние хранилища «общее» в вашем компоненте. Вам необходимо подключить свой компонент к хранилищу. Пример в 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

Комментарии:

1. на самом деле я не использую контейнер connect. Для этой цели я использую react komposer.

Ответ №2:

Если вы хотите отслеживать изменения, внесенные в хранилище redux, как вы сказали в своем названии, вы можете попробовать redux-logger. Вы сможете видеть в консоли Google Chrome каждое созданное действие и все изменения в вашем магазине, например

введите описание изображения здесь

Ответ №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)
Метки: ,