Reduxでの入力値の取得

Question

私はReduxを学びたいと思っています。私がここで間違っていることを知りたいのです。私は単純な入力フィールドを持っており、入力フィールドに変更が発生するたびにテキストを大文字にするアクションをディスパッチしたい。ここに私のReduxのstoreです：

const TOCASE = (state="meow", action) => { 
    switch(action.type){ 
     case 'UPPER': 
     return state.toUpperCase() 
     case 'LOWER': 
     return state.toLowerCase() 
     default: 
     return state 
    } 
} 
const {createStore} = Redux; 
const store = createStore(TOCASE) 

ここに私のcomponentです：

const Case = React.createClass({ 
    render(){ 
    return(
     <div> 
     {this.props.text} 
     <input type="text" value={this.props.text} onChange={this.props.onUpper}/> 
     </div> 
) 
} 
}) 


const render =() => ReactDOM.render(<Case 
       text={store.getState()} 
       onUpper={(e)=>store.dispatch(e.target.value,{type: 'UPPER'})} 
       />, document.getElementById('app')) 

render() 
store.subscribe(render) 

Answer 1

最初の問題は、あなたが行動を派遣しているあなたのReactDOM.render方法である：

onUpper={(e)=>store.dispatch(e.target.value,{type: 'UPPER'})} 

行がなければなりません

onUpper={(e)=>store.dispatch({type: 'UPPER', data : e.target.value})} 

もう一つの問題は、この変更をどのように削減するかです。あなたの減速機は2つのパラメータを取りますが、それはあなたが状態と行動を派遣することを意味しません。それはReduxのcreateStoreでReduxが状態を減速機に渡すことを意味します。 Redux createStoreを見てこれを学ぶ最善の方法。これは非常に短いコードです。あなたは後で自分自身に感謝するでしょう。

だからあなたの減速の変化がある：

switch(action.type){ 
     case 'UPPER': 
     return action.data.toUpperCase() 
     case 'LOWER': 
     return action.data.toLowerCase() 
     default: 
     return state 
    } 

どのようにあなたの減速の作品や派遣作品短い要約。なぜ私は言ったようにパラメータを取るのですか：

私が前に言ったように減速機は、減速機を最初のパラメータとして与えるcreateStore関数で呼び出されています。だからあなたの減速機を取り、ディスパッチオブジェクト、サブスクライブなどを返します。基本的には、これらの関数はcreateStoreで作成された関数への参照です。

アクションをディスパッチするたびに、実際にディスパッチ関数createStoreが返されます。基本的には、このディスパッチを暗黙的に呼び出しています。私は、これがあなたの考え方をどのように働かせるかと思います。ソースコードをチェックする最良の方法。

Answer 2

ストアへの発送はアクションオブジェクトでなければなりません。ジューサーで

onUpper={(e) => store.dispatch({ type: 'UPPER', text: e.target.value })} 

、コードは次のようになります。

case 'UPPER': 
     return action.text.toUpperCase();