Redux (on process)

Redux helps us to create a single source of truth, to group the state of our components in a JavaScript object separate from our containers or components. We can get and update the state we want connecting our component to this separate object. We wrap our component tree so we have access to Redux functions. We can grab the state we want and Redux will map it to our component as a prop.

We keep our state in the store. To update the data we have in the store we have to send an action, with a type and maybe a payload to the store, who send it to our reducer that holds information for how Redux can update that state depending on the type of the action. Actions and reducers are POJOS.

Any component ‘connected’ will be able to modify the state using an action we’ve defined.

We keep our state in one JS object, the store, and our actions and reducers on another two different JS objects.

Reducers will need a state and an action, and Actions will need a type property and an optional payload.

When we update the state it is very important not return null or undefined, that’s why we use a default return.

Action ({type: 'LIST_BOOKS'}) -> Reducer ( which is a function that we pass a state and an action (payload)) -> Updated State (returns as a prop to the component)

1	Action ({type: 'LIST_BOOKS'}) -> Reducer ( which is a function that we pass a state and an action (payload)) -> Updated State (returns as a prop to the component)

Reducers are pure functions. Our reducer never updates the previous state, creates a new state object.

The reducer updates the state but doesn’t persist these changes. To persist these changes we can reassign the return value of the reducer to a variable. We can encapsulate that in a function, in dispatch.

We dispatch an action to the store, who calls our reducer and returns to us a new state.

We create a store function ( which is a closure) to encapsulate the state (so we don’t change it by mistake in other places of our code), to encapsulate our dispatch function and to encapsulate a function to get the new state (getState). When we call this store function we get an JS object with our dispatch function as a method, which has access to state.

Redux works by having an action dispatched, which calls a reducer, and then renders the view.

Using Redux in an React app

To install Redux in my app I type into my console:

npm install --save redux

npm install --save react-redux

npm install --save redux-thunk

Initialize my store in index.js using createStore Redux function and pass it down to my top-level <App /> container.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './containers/App';
import * as serviceWorker from './serviceWorker';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import booksReducer from './reducers/booksReducer';

const store = createStore(
    booksReducer,
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);

ReactDOM.render(
    //We pass our store as a prop to Provider and wrap our App component so all our components will have access to our Redux store and/or dispatch actions via the connect function.
    //Provider tells to our Redux app when there has been a change in state and has to re renders via the connect function. We have to specify which changes to the store's state should prompt a re-render of the application.
    <Provider store={store}>
        <App />
    </Provider>, 
    document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

import React from 'react';

import ReactDOM from 'react-dom';

import App from './containers/App';

import * as serviceWorker from './serviceWorker';

import { createStore } from 'redux';

import { Provider } from 'react-redux';

import booksReducer from './reducers/booksReducer';

const store = createStore(

booksReducer,

window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()

);

ReactDOM.render(

//We pass our store as a prop to Provider and wrap our App component so all our components will have access to our Redux store and/or dispatch actions via the connect function.

//Provider tells to our Redux app when there has been a change in state and has to re renders via the connect function. We have to specify which changes to the store's state should prompt a re-render of the application.

<App />

</Provider>,

document.getElementById('root')

);

// If you want your app to work offline and load faster, you can change

// unregister() to register() below. Note this comes with some pitfalls.

// Learn more about service workers: https://bit.ly/CRA-PWA

serviceWorker.unregister();

To have access to the store in any of our components we import the react-redux function connectinto the component where we want to have access.

If we want some state we can use:

const mapStateToProps = state => {
  return {
    whatEverWeWant: state.whatEverWeWant
  };
};

const mapStateToProps = state => {

return {

whatEverWeWant: state.whatEverWeWant

};

We can access these data as: this.props.whatEverWeWant. We can create our own customised props playing with the data of our store, with the state with have created in the state of our reducer. For example here we have whatEverWeWant only in the state, but if we want a prop like numberOfwhatEverWeWant we don’t modify our reducer, we can add numberOfwhatEverWeWant: state.whatEverWeWant.length in our mapStateToProps and that’s it!

If we want to dispatch an action and update our store we do something like:

const mapDispatchToProps = dispatch => {
  return {
    typeOfOurAction: () => dispatch({ type: 'TYPE_OF_OUR_ACTION' })
  };
};

const mapDispatchToProps = dispatch => {

return {

typeOfOurAction: () => dispatch({ type: 'TYPE_OF_OUR_ACTION' })

};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(App);

export default connect(

mapStateToProps,

mapDispatchToProps

)(App);

Then to be able to debug I have installed redux-devtools-extension and add this code to my index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './containers/App';
import * as serviceWorker from './serviceWorker';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import booksReducer from './reducers/booksReducer';

const store = createStore(
    booksReducer,
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);

ReactDOM.render(
    //We pass our store as a prop to Provider and wrapp our App component so it will have access to our Redux store and/or dispatch actions from any component we want.
    <Provider store={store}>
        <App />
    </Provider>, 
    document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

import React from 'react';

import ReactDOM from 'react-dom';

import App from './containers/App';

import * as serviceWorker from './serviceWorker';

import { createStore } from 'redux';

import { Provider } from 'react-redux';

import booksReducer from './reducers/booksReducer';

const store = createStore(

booksReducer,

window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()

);

ReactDOM.render(

//We pass our store as a prop to Provider and wrapp our App component so it will have access to our Redux store and/or dispatch actions from any component we want.

<App />

</Provider>,

document.getElementById('root')

);

// If you want your app to work offline and load faster, you can change

// unregister() to register() below. Note this comes with some pitfalls.

// Learn more about service workers: https://bit.ly/CRA-PWA

serviceWorker.unregister();

connect function

export default connect(mapStateToProps)(App);

1	export default connect(mapStateToProps)(App);

connect function listen to changes in the state.

When a change occurs it calls the function mapStateToProps()where we specified the info we want from the state and gives it to us as a prop. We have to write this function ourselves. This function has access to the entire store’s state.

And then we finally specify which component of our app we are providing with this data.

If we don’t give a second argument to connect,(mapDispatchToProps would be the one), connect gives us the prop dispatch for free! This second method allows us to customise how we send actions to our reducer. If it is not for this second argument, our component wouldn’t know anything about Redux and our store.

One pattern is to only connect Container components.

Redux Actions

Actions are POJOs that has a property of type.

We dispatch our action to the store (whit the dispatch method), the store passes the action to the reducer, that checks the type property to see what he has to do, what changes will make to the state. Remember reducer takes two parameters, state and action.

store.dispatch( { type: 'LIST_BOOKS'} );

1	store.dispatch( { type: 'LIST_BOOKS'} );

We should wrap our actions into functions, in case these actions have some parts that will need to change or add different payload properties (like a user to the list of user), and we pass those functions to the dispatch method. Those functions are called action creators.

We keep our React application separated from our Redux application by using the Provider component and the connect() function.

We don’t reference our store in our components. mapStateToProps() and mapDispatchToProps() allow us to separate concerns. The first one helps us to manage our state and the second one is an action creator, mapped as a prop. Our components only display state, they don’t manage it.

We pass these two functions to connect(). When connect()' executes it calls the first function, mapStateToProps, and pass it the current state. Then it calls the second function and passes it the dispatch function. The dispatch function takes an action, so don’t forget to import the action :). Then we can access this dispatch function as a prop.

Refactoring these methods.

import React, { Component } from 'react';
import './App.css';
import { connect } from 'react-redux';
import { addItem } from  './actions/items';
 
class App extends Component {
 
  handleOnClick = event => {
    this.props.addItem()
  }
 
  render() {
    debugger
    return (
      <div className="App">
        <button onClick={this.handleOnClick}>
          Click
          </button>
        <p>{this.props.items.length}</p>
      </div>
    );
  }
};
 
const mapStateToProps = state => {
  return {
    items: state.items
  }
}
 
const mapDispatchToProps = dispatch => {
  return {
    addItem: () => { dispatch(addItem()) }
  }
}
 
export default connect(mapStateToProps, mapDispatchToProps)(App);

import React, { Component } from 'react';

import './App.css';

import { connect } from 'react-redux';

import { addItem } from './actions/items';

class App extends Component {

handleOnClick = event => {

this.props.addItem()

}

render() {

debugger

return (

Click

</button>

<p>{this.props.items.length}</p>

</div>

);

}

};

const mapStateToProps = state => {

return {

items: state.items

}

const mapDispatchToProps = dispatch => {

return {

addItem: () => { dispatch(addItem()) }

}

export default connect(mapStateToProps, mapDispatchToProps)(App);

This is equivalent to:

import React, { Component } from 'react';
import './App.css';
import { connect } from 'react-redux';
import { addItem } from  './actions/items';
 
class App extends Component {
 
  handleOnClick = event => {
    this.props.addItem()
  }
 
  render() {
    debugger
    return (
      <div className="App">
        <button onClick={this.handleOnClick}>
          Click
          </button>
        <p>{this.props.items.length}</p>
      </div>
    );
  }
};

export default connect(state => ({ items: state.items }), { addItem })(App);

import React, { Component } from 'react';

import './App.css';

import { connect } from 'react-redux';

import { addItem } from './actions/items';

class App extends Component {

handleOnClick = event => {

this.props.addItem()

}

render() {

debugger

return (

Click

</button>

<p>{this.props.items.length}</p>

</div>

);

}

};

export default connect(state => ({ items: state.items }), { addItem })(App);

We can pass an anonymous function as first argument to connect, and we can pass a function, if we do this we have to do it as before, or an object and connect will pass it the dispatch function. If we pass an object, this one needs to contain key/value pairs for each action creator we want to become props. As of JavaScript ES6, when we have an object with a key and value with the same name, we can use the shorthand syntax and write { addItem }.

combineReducers()

It combines the different reducers we pass to it into one single reducer that we pass to our store.

Leave a Reply Cancel reply