0

.NET-starting-with-js-and-react guy here again :)

I was always struggling with the way how the state should be modified without mutating itself. With the new ES6 spread operator I thought I will not suffer anymore but seems like I am doing something wrong.

I have tried various of approaches how to add the item into the array (code example is from this link )

Reducer:

const patientsInitialState = {
     patients : [],
     selectedPatient: {}
}

const PatientsReducer = (state = patientsInitialState, action) => {
    switch(action.type) {
        // other not related cases
        case 'ADD_PATIENT':
        return { 
            ...state,
            patients: [...state.patients, action.payload]
        }
        // also tried this:
        //return {
        //    patients: [ ...state.patients, action.payload]
        //}
        default:
            return state;
    }
}

export default PatientsReducer;

Component:

 handleAddPatientClick(patient) {
    var config = {
        headers: {
            'Accept':'',
            'Content-Type': 'application/json'
        }
    };

    axios.post(url + 'patients', patient, config).then(res => 
    {   
        this.props.dispatch(addPatientAction(patient));
    })
    .catch( function(error) {
        console.log(JSON.stringify(error, null, 2));
    });
}

How I connect my store to props:

@connect((store) => {
    return {
        patients: store.PatientsReducer.patients
    }
})
export default class RegistratePatient extends React.Component {
    constructor(props) {
        super(props);

        this.handleAddPatientClick = this.handleAddPatientClick.bind(this);
        // constructor code
   }

   handleAddPatientClick(patient) {
       // code above
   }

   render() {
      // render code
   }
}
pandemic
  • 1,135
  • 1
  • 22
  • 39
  • check the answer here: https://stackoverflow.com/questions/32646920/whats-the-at-symbol-in-the-redux-connect-decorator I think that maybe you need to provide an anonymous second function to the `@connect` ? (just a guess) if you have the example app on github I could pull it and help debugging – beniutek Oct 25 '17 at 22:59
  • thanks for your effort! the code is here https://github.com/trannann/StackOverflow .By running bash.sh it will bundle up the js files. You have to change the webpack.config.js and insert your desired destination. the index.html is in View folder – pandemic Oct 26 '17 at 16:12
  • @beniutek I can provide more information how to connect to the API. I will by available here next 6 hours https://chat.stackoverflow.com/rooms/157594/pandemic – pandemic Oct 26 '17 at 16:39
  • So `this.props.patients` has the right values and the component just isn't rendering it? – strider Nov 14 '17 at 22:38

1 Answers1

0

Try this 

  const PatientsReducer = (state = patientsInitialState, action) => {
        switch(action.type) {
            // other not related cases
            case 'ADD_PATIENT':
              return Object.assign({}, state, {patients:[...state.patients,action.payload]})

            default:
                return state;
        }
    }
Akhil
  • 619
  • 1
  • 6
  • 14
  • unfortunately this does not help. I can see that the call arrived to API then dispatching of action and finally doing the deep copy in reducer. but nothing re-renders – pandemic Oct 25 '17 at 20:23
  • I am not familiar with the @connect decorator you are using to connect to the store, could you try using a more conventional way of creating a redux store with combinereducers and createStore methods like shown in the answer of this question https://stackoverflow.com/questions/43900836/redux-state-in-component? – Akhil Oct 25 '17 at 20:37