JavaScript
React
redux

React-Reduxのデータ渡し方

前回のリーク

React-ReduxのAction使い方(個人理解)
https://qiita.com/jakushin/items/69519d386ca084978c40

Reducesでデータの要素を作る

reducers/button.js でデータの本体を作る

export const initial = {
  param: null 
};

Actionが呼ばれたときにデータの操作を追加する

ここはActionが呼ばれたときに(ボタンが押したら)、データの中身を書き換えることにする

const handlers = {
  [ actions.BUTTON_PUSH ]: ( state, action ) => {

   const param = 'This is a param.'

    return {
      ...state,
      param
    };
  }
};

combineReducersにReducersの登録も忘れず

import button from './button'
import { combineReducers } from 'redux';

export default combineReducers({
   button
});

Containerにデータを渡す

データをstateから取得し、Viewに渡す

@connect( state => ({
  param: state.param //<-- stateのparamを渡す
}), {
  buttonPush
})

export default class MenuContainer extends React.Component {
  constructor( props ) {
    super( props );
  }

  render() {
    return (
      <div>
        <Menu
          buttonPush={ this.props.buttonPush }
          param={ this.props.param }  //Viewに渡す
        />
      </div>
  );
}

Viewでデータを表示する

export default class Menu extends React.Component {
  constructor( props ) {
    super( props );
  }

  buttonPushed() {
    this.props.buttonPush();   // Actionの実行によって、データを取れる
  }

  render() {
    return (
      <div onClick={ this.buttonPushed.bind( this ) }>
      </div>
      <div>Params: {this.props.param}</div>
    );
  }
}

最後

 以上でデータとActionの使い方です。