React Redux，如何更改状态中的单个元素？

Question

i have a question for you.. i have an object stored in my redux store, this object contains other object and array of object.. So, i need to update a single field inside this object and mantain the entire object and after i'll make a post request by passing this object.

My object (payload) is:

{
name: "test",
surname: " test2",
option: [
{
option1: "option1"
}}
]
additionalInfo: {
location: "street"
}

each element are printend in page using input text field, how i can make a function that onchange method selecte the correct field and update it?

function policies(state = initialState, action) {
  const { type, payload } = action;

  switch (type) {
    case policiesTypes.SET_POLICY_DETAILS:  
      return { ...state, content: payload };

Answer 1

You have to dispatch the store. use store.dispatch in onChange written as a function. This will help you change the store's global state. And in the reducer's switch, it is switch(action) and action object holds action.type and action.payload . When you directly pass action type in the switch statement, you might not get results as expected.

eg :
In your Reducer change the switch statement as:

switch(action){
case "YOUR_ACTION":
  return {...state, ...action.payload};
}      

In your index.js file,

import store from 'react-redux';
...

onChange=(value)=>{
   store.dispatch({type:"YOUR_ACTION",payload:value});
}

This will clear the existing object's values and update the state with the new values that you provide. And as you are updating onChange, the state might clear all previous keys too, so be cautious while using it onChange.

Answer 2

Solved from myself:

case policiesTypes.SET_POLICY_HEADER:
  let content = JSON.parse(JSON.stringify(state.content));
  content.policyHeader = content.policyHeader || {};
  content.policyHeader[action.key] = action.value;
  return { ...state,  content};

and actions:

const setPolicyHeader = (key, value) => ({type: policiesTypes.SET_POLICY_HEADER, key, value});

and onchange

onChange={ e => dispatch(actions.setPolicyHeader('localPolicyNumber', e.target.value))}