Redux child 未更新 parent 组件状态

Question

我想我在这里遗漏了一些重要的东西。我希望 App 组件根据状态值注册不同的 children。单击 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
    };
}

components/user-type.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);

components/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'));

Answer 1

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

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

有个“.”而不是简单地传递未定义的“，”。

第二件事是你的 switch 语句

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

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

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

所以你总是会以这里的默认情况结束。所以你应该改用switch(this.props.step)。

Redux child 未更新 parent 组件状态

Redux child not updating parent component state

reactjs

redux