状態値を格納するためのReduxの適切な場所/方法

Question

現在、私は、データ値を渡すためにactionを使用していますので、...

<button onClick={() => this.props.getSource("hello")}>Check</button> 

として私は、次のアクションへのhello ...

を渡しています私もこのアクションをリッスン私のアプリ内アクションリスナーを持っている

export const getSource = (string) => { 
    return { 
     type: "SOURCE_RECEIVED", 
     payload: string 
    } 
} 

...

export default function (state=null, action) { 
    switch(action.type) { 
     case "SOURCE_RECEIVED": 
      return action.payload; 
      break; 
    } 
    return state; 
} 

Iまた、アクションリスナーを組み合わせています...

import String from './reducer-listener'; 

const allReducers = combineReducers({ 
    source: String 
}); 

私は次のコードを使用していストアを作成するには...

import allReducers from './reducers'; 

const store = createStore(allReducers); 

const app = document.getElementById('app'); 
ReactDOM.render(
    <Provider store={store}> 
     <Layout/> 
    </Provider> 
    , app); 

私の問題があり、私は、アプリの中に文字列helloを保存したいです後で取り出すか更新することができるようにする。今私がやっているのは、文字列を取り出してコンソールに印刷することだけです。私はreduxを使って州の価値を保存する適切な方法が何であるか分かりません。

hello文字列を後で取り出せる場所に保存できるようにコードを更新するにはどうすればよいですか？

Answer 1

ここmapStateToProps上のドキュメントをチェックアウト：

• http://redux.js.org/docs/basics/UsageWithReact.html#container-components
• https://github.com/reactjs/react-redux/blob/master/docs/api.md

を基本的にあなたは、このようなReduxのストアにあなたのコンポーネントを "接続" したい：

import { connect } from 'react-redux' 

const mapStateToProps = (state, ownProps) => { 
    return { 
    source: state.source 
    } 
} 

const TheConnectedComponent = connect(
    mapStateToProps 
)(TheComponent); 

Answer 2

bのような減速機を作成するELOW

var userReducer = function (state = {}, action) { 
    switch (action.type) { 
      case 'SET_NAME': 
       return { 
        ...state, 
        name: action.name 
       } 
      default: 
       return state; 
     } 
} 

あなたはこの瞬間に以下のコード

import { createStore } from 'redux' 
let store = createStore(userReducer) 

を使用してストアを作成することができます

console.log('store state after initialization:', store.getState()) 

によって状態をテストすることができ、この

var setNameActionCreator = function (name) { 
    return { 
     type: 'SET_NAME', 
     name: name 
    } 
} 

のようなアクションの作成者を作成します。

任意のv

以下

store.dispatch(setNameActionCreator('bob')) 

のようなアクションの作成者を派遣することにより店舗へALUE

派遣機能が再来によって提供されており、私たちの行動を伝播し、それが

あなたのボタンのクリックで呼び出すことができ あなたは

によって更新された状態を取得します

console.log('store state after action SET_NAME:', store.getState())