REACT & REDUX – tracing the steps…

THE NORMAL REACT STUFF

  1. Develop the code which: reads an input and writes to (local) state upon submit.
  2. the render() reads from (local) state and lists out the data.
  3. This will eventually be the PRESENTATION layer of our App.

THE REDUX STUFF

  1. Create a storewhich ties to a reducer
  2. Create a reducerwhich performs action based on the type
  3. Normally, we dispatch the (Add/Edit) function(s) using store(dot)dispatch
  4. Don’t dispatch the function(s)for now

THE REACT meets REDUX STUFF

  1. Presentation Component has all the details related to the UI/UX;
  2. mapStateToProps
    • helps MAPS the STATE to PROPS (when we replace STATE by PROPS)
    • This is for FETCHING Data from the Redux Store
    • put the properties here which you want to return and print on the screen
    • This is where you replace this.state.propertyName by this.props.propertyName
    • here we declare what pieces of state you want to have access to (we got access to message only)
  3. mapDispatchToProps
    • helps MAPS the DISPATCH to PROPS (when we replace STATE by PROPS)
    • here we declare which action creators you need to be able to dispatch (we got access to subitNewMessage only)
    • in React: upon a click event, we used to update the state like setState( messages: this.state.messages.concat(currentMessage) )
    • Now, to use Redux: We do props.submitNewMessage(currentMessage)
    • submitNewMessage didn’t exist before, this is defined inside the mapDispatchToProps function
  4. connect
    • used for bringing it all together
    • Container is used to connect state & dispatching with the

basic Code for react redux (as per listing above)

 

Advertisements

Redux – Immutability

Methods for enforcing the key principle of state immutability in Redux. Immutable state means that we never modify the state directly, instead we return a new copy of the state.


const immutableTypesDefaultState = { lastInput: '', messages: ['message1', 'message2', 'message3'] };
const immutableTypesReducer = (state = immutableTypesDefaultState, action) => {
switch (action.type) {
case 'ADD_BAD': { /* BAD !!! PUSH IS STATE MUTATION */
// this.setState({ messages : this.state.messages.push(action.input)});
//console.log('looking to push ['+action.input+'] into messages array');
var newArray = state.messages;
newArray.push(action.input);
return { lastInput: action.input, messages: newArray };
}
case 'ADD_GOOD_NORMAL': { /* GOOD !!! THIS IS NOT MUTATION */
//console.log('looking to add ['+action.input+'] via concat');
var anotherArray = state.messages;
anotherArray = anotherArray.concat(action.input);
return { lastInput: action.input, messages: anotherArray };
}
case 'ADD_GOOD_SPREAD': { /* GOOD !!! THIS IS NOT MUTATION using the SPREAD operator */
//console.log('looking to add ['+action.input+'] via spread');
var yetAnotherArray = [...state.messages, action.input];
return { lastInput: action.input, messages: yetAnotherArray };
}
case 'REMOVE_ITEM': { /* GOOD !!! THIS IS NOT MUTATION using the SPREAD operator */
//console.log("requesting to remove an object on index:",action.input);
var slimmedArray = state.messages.filter(val => val != state.messages[action.input])
return { lastInput: action.input, messages: slimmedArray };
}
case 'OBJECT_ASSIGN': { /* GOOD !!! THIS IS OBJECT ASSIGNMENT WITHOUT MUTATION */
//console.log("requesting to change an object while enforcing state immutability with:",action.input);
var changeObject = Object.assign({}, immutableTypesDefaultState, { lastInput:action.input} );
return { lastInput: action.input, messages: changeObject };
}
default: return state;
}
}

const ImmutableTypesStore = createStore(immutableTypesReducer);
console.log(ImmutableTypesStore.getState());

setTimeout(function () {
ImmutableTypesStore.dispatch({ type: 'ADD_BAD', input: 'sample input for push' });
console.log(ImmutableTypesStore.getState());
}, 2000);

setTimeout(function () {
ImmutableTypesStore.dispatch({ type: 'ADD_GOOD_NORMAL', input: 'sample input for Good via concat' });
console.log(ImmutableTypesStore.getState());
}, 4000);

setTimeout(function () {
ImmutableTypesStore.dispatch({ type: 'ADD_GOOD_SPREAD', input: 'sample input for Good via spread' });
console.log(ImmutableTypesStore.getState());
}, 6000);

setTimeout(function () {
ImmutableTypesStore.dispatch({ type: 'REMOVE_ITEM', input: 1 });
console.log(ImmutableTypesStore.getState());
}, 8000);

setTimeout(function () {
ImmutableTypesStore.dispatch({ type: 'OBJECT_ASSIGN', input: 'Object.assigned was used for this' });
console.log(ImmutableTypesStore.getState());
}, 10000);