Redux 子组件不更新父组件状态答案

【问题标题】：Redux child not updating parent component stateRedux 子组件不更新父组件状态
【发布时间】：2016-02-11 20:37:48
【问题描述】：

我想我在这里遗漏了一些重要的东西。我希望 App 组件根据状态值注册不同的子级。单击 UserType 中的按钮时，没有任何反应。我可以通过调试看到减速器正在返回更新步骤的状态。但我猜 App 没有注册状态变化？

reducers/index.js

import { combineReducers } from 'redux';
import { UPDATE_STEP, INIT } from '../actions';

const INITIAL_STATE = { step : 1 };

function testReducer(state = INITIAL_STATE, action){
    console.log('reducing the actions');
    console.debug('Working with', action.type);

    switch(action.type) {
        case UPDATE_STEP:
            return {
                ...state,
                step : state.step + 1
            };
        default:
            return state;
    }
}

const rootReducer = combineReducers({
    test : testReducer
});

export default rootReducer;

actions/index.js

export const UPDATE_STEP = 'UPDATE_STEP';

export function updateStep(step) {
    return {
        type : UPDATE_STEP,
        step
    };
}

组件/用户类型.js

import React, { PropTypes } from 'react';
import { connect } from 'react-redux';
import { updateStep } from '../actions';

class UserType extends React.Component {

    onClick() {
        this.props.updateStep(2);
    }

    render() {
        return (
            <div>
                <p>Hai</p>
                <button onClick={ this.onClick.bind(this) }>Click Me</button>
            </div>
        )
    }
}
export default connect(null, { updateStep })(UserType);

组件/app.js

import React from 'react';
import { connect } from 'react-redux';

import UserType from './user-type';
import Test from './test';

class App extends React.Component {

    render() {
        switch(this.props.page) {
            case 1:
                return <UserType />;
            case 2:
                return <Test />;
            default:
                return <UserType />;
        }
    }
}

const mapStateToProps = (state) => {
    return { step : state.test.step };
};

export default connect(mapStateToProps. null)(App);

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore } from 'redux';

import App from './components/app';
import reducers from './reducers';

let store = createStore(reducers);

ReactDOM.render(
    <Provider store={ store }>
        <App />
    </Provider>
, document.querySelector('#view-container'));

【问题讨论】：

标签： reactjs redux

【解决方案1】：

我在您的代码中发现了两个问题，都在 components/app.js 中

export default connect(mapStateToProps. null)(App);

有一个“。”而不是简单地传递 undefined 的 ","。

第二件事是你的 switch 语句

switch(this.props.page) {...}

但是你将你的 redux-store 映射到 prob step

const mapStateToProps = (state) => {
    return { step : state.test.step };
};

因此，您将始终在此处以默认情况结束。所以你应该改用switch(this.props.step)。

【讨论】：

该死的错别字。谢谢楼主