时间戳

首页 > 解决方案 > 商店状态更改后反应应用程序不重新呈现

javascript - 商店状态更改后反应应用程序不重新呈现

问题描述

商店更改后，我的组件不会重新渲染。我通过使用 store.subscribe() 和 console.log(store.getState()) 将他放到控制台来确保商店实际上正在改变，但组件仍然没有再次重新呈现。我会感谢你的帮助。

configureStore.js

import { createStore, combineReducers } from 'redux';
import home from '../reducers/home';
import favorites from '../reducers/favorites';

export default () => {
    const store = createStore(combineReducers({
        home,
        favorites
    }))

    return store;
}

应用程序.js

import React from 'react';
import ReactDOM from 'react-dom';

import { Provider } from 'react-redux';
import configureStore from './redux/store/configureStore';
import AppRouter from './router/AppRouter';

const store = configureStore();

const jsx = (
    <Provider store={store}>
        <AppRouter />
    </Provider>
);

ReactDOM.render(jsx, document.querySelector('#root'));

home.js（减速器）

const homeDefaultState = {
    name: 'someName'
}

export default (state = homeDefaultState, action) => {
    switch (action.type) {
        case 'CHANGE_NAME':
            return {
                ...state,
                name: 'otherName'
            }
        default:
            return state;
    }
}

home.js（动作）

export const changeName = () => ({
    type: 'CHANGE_NAME'
})

Home.js（组件）

import React from 'react';

import configureStore from '../../redux/store/configureStore';
import { changeName } from '../../redux/actions/home';
import { connect } from 'react-redux';

const store = configureStore();

const handleName = () => {
    store.dispatch(changeName())
}

const Home = (props) => (
    <div className="home">
        <button onClick={handleName}>
            change name
        </button>

        {props.home.name}
    </div>
);

const mapStateToProps = (state) => ({
    home: state.home
});

export default connect(mapStateToProps)(Home);

标签： javascriptreactjsredux

解决方案

在您的Home组件中，您第二次初始化存储。并绑定到这第二家商店

const store = configureStore();

const handleName = () => {
    store.dispatch(changeName())
}

同时与connect()您访问声明的存储App.jsx

从第一个读取但第二个更新。只需删除第二个store并使用mapDispatchToProps（传递给的第二个参数connect()）代替：

const mapStateToProps = (state) => ({
    home: state.home
});

export default connect(mapStateToProps, { handleName: changeName })(Home);

推荐阅读