Redux子不更新父組件狀態

我想我錯過了一些至關重要的東西。我希望App組件根據狀態值註冊不同的子項。當點擊來自UserType的按鈕時，沒有任何反應。我可以通過調試看到reducer正在返回更新步驟的狀態。但我猜應用程序沒有註冊狀態更改？Redux子不更新父組件狀態

減速器/ 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;

動作/ index.js

export const UPDATE_STEP = 'UPDATE_STEP'; 

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

組件/用戶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);

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

來源

2016-02-11 Steve Silvestri

我發現代碼中的兩個問題，無論是在組件/ app.js

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

有一個「」而不是簡單地通過未定義的「，」。

第二件事情是你的switch語句

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

但是你擁有你終極版店內映射到概率step

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

所以，你總是會在默認情況下會在這裏結束。所以你應該使用switch(this.props.step)。

來源

2016-02-11 21:54:03 larrydahooster

上帝該死的錯別字。謝謝你，先生 –

Redux子不更新父組件狀態

回答

相關問題