javascript - 商店状态更改后，React 应用程序不会重新渲染

Question

商店更改后我的组件不会重新渲染。 我通过将他放到控制台来确保商店实际上正在改变 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;
}

App.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( reducer )

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);

Answer 1

在您的 Home 组件中，您第二次初始化存储。并将操作绑定(bind)到第二个商店

const store = configureStore();

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

同时使用connect()，您可以访问App.jsx中声明的存储

从第一个读取但更新第二个。只需删除第二个 store 并使用 mapDispatchToProps( second parameter passed 到 connect()) 即可:

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

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