Redux

Posted on Posted in Technologies

Redux Notes:

  • Redux is in charge of the whole application state NOT component state
  • All Reducers are matched in combineReducers method
  • Action Creator are in charge of changing application state

Store

  • Action Creator – returns an object action, which automatically sent to all reducers
  • reducer_data – is your data

Some Imports to note

import {connect} from ‘react-redux’;

  • allows you to mapstate to props so you wire up the reducer data to the props binding Action Creators syntax
  • the difference with a normal function is that it will pass to all reducers
import {bindActionCreators} from 'redux';
  • for binding action creators this will be part of props as well
Some Functions

function mapDispatchToProps(dispatch){
 return bindActionCreators({selectName : selectName}, dispatch);
}
is the same as: this.props.selectName

export function selectName(name){
 console.log('this name has been selected ' + name.name
 return{
 type: 'BOOK_SELECTED',
 payload: name
 };
}

NOTES
When creating a new js, know first whether is the a COMPONENT OR A CONTAINER

  • COMPONENT is just a react file, it just cares with displaying, no state whatsoever
  • CONTAINER cares about state, and is redux, needs to extend Component
  • Action  are just handlers of action done
  • Reducers  are what to do with the action done
  • Middleware are interceptors,they process promises to results
    • This is especially useful when dealing with asynchronous calls
    • when we talk about promise we are dealing with:
import promise from 'redux-promise';

Pulling data from reducer to Container:

  1.  import connect from {react-redux}
  2.  function mapStateToProps(state){ // parameter state return {data: state.data}}
  3.  export default connect(mapStateToProps)(className)

Routes: using routes to manipulate pages via URL redirecting

Note that React/Redux really is a SPA (Single Page Application) but the Routes determine what components to display making it seem like there are multiple pages

 <Route path="/Posts/new" component={PostsNewPage}/>
React bootsrap css:
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">

Redux-form – Form validation and form submission in Redux

  • import {reducer as formReducer} from 'redux-form';
    ...
     form: formReducer
  • import {Field, reduxForm} from 'redux-form';

Creating Fields:

<Field label="Title" name="title" type="text"
                component={this.renderField} /> 

renderField(field){
        return(<div className="form-group">
                <label>{field.label}</label>
               <input className="form-control" type={field.type}
                {...field.input}/>
            </div>)}

export default reduxForm({
 form: 'PostsNew'
})(PostsNew)

connecting redux form to action controller:

export default reduxForm({
 validate,
 form: 'PostsNewForm' 
})(
 connect (null, {savePosts})(PostsNew)
);

Notes:
this.props.match.params.id
– to get params on URL from REACT ROUTER

MAP STATE TO PROPS – Props is declared in root combineReducers, so if you name an object in root reducer as postProps is declared in root combineReducers, so if you name an object in root reducer as post then it can be access in map state to props as post