入力フィールドの値をreduxストアから直接入力する

Question

入力フィールドの値をreduxストア値に設定できますか？あるいは、私のローカル州に小道具をコピーする必要がありますか？

<input 
     placeholder={props.placeholder} 
     value={props.value} 
/> 

props.valueが反応し、ReduxののConnectから来ています。

しかし、私は入力の値を変更することはできませんが、私は小道具だけ

Answer 1

あなたはそれが正しいですが、そのように値を設定することができます読み込まれるので、これがあると思います。あなたはReduxのストア（doc about controlled form fieldsを反応させるのチェック）に対応する値を更新するアクションを派遣するonChangeイベントハンドラを追加する必要があり、このような入力値を変更するには：上記の例では

<input 
     placeholder={props.placeholder} 
     onChange={(event) => props.updateValueInRedux(event.target.value)} 
     value={props.value} 
/> 

をupdateValueInReduxが再来からコンポーネントに渡された関数であるべきconnectは、mapDispatchToPropsのプロパティーとして、Redux状態を更新するアクションをディスパッチします。それはそのようになります。

const mapStateToProps = { 
    ... 
} 

const mapDispatchToProps = (dispatch) => { 
    return { 
     updateValueInRedux: (value) => { 
      dispatch(someReduxUpdateAction(value)); 
     } 
    } 
}; 

const MyConnectedComponent = connect(
    mapStateToProps, 
    mapDispatchToProps 
)(MyComponent); 

Answer 2

はBartekが言ったことに追加するには、あなたの行動は次のようになります。

//Action Creator 
 
export const UPDATE_VALUE = 'UPDATE_VALUE'; 
 

 
export function updateValueInRedux(value) { 
 
    return ({ 
 
    type: UPDATE_VALUE, 
 
    payload: value 
 
    }); 
 
} 
 

 
//Reducer 
 
import { 
 
    UPDATE_VALUE 
 
} from './actions'; //[Or directory where your actions reside] 
 

 
const INITIAL_STATE = { 
 
    value: '' 
 
} 
 
export default 
 
const UpdaterReducer = (state = INITIAL_STATE, action) { 
 
    switch (action.type) { 
 
    case UPDATE_VALUE: 
 
     return { ...state, 
 
     value: action.payload 
 
     } 
 
    default: 
 
     return state; 
 
    } 
 
} 
 

 
//Now 'value' will be available to all components that have the reducer state mapped to their properties