24
React Redux : a quick 'under the hood'
Redux is a popular JavaScript library for managing the state of your application. Something like 60% of React applications use Redux, so you may have heard of it at least. Redux puts all of our projects state in one place. This is the primary use case with Redux, the problem it solves is making the passing of data and state a lot less of a headache - for example if we have a parent component from which it has two child components - these components want to use and share the same sate. Generally speaking this can be solved by lifting up - so you lift state from the 2nd child component to the App.js file, then once its at that top level you can use state in the 3'rd component in this situation. This uni-directional flow gets problematic when we're working with far more large and complex applications in which many states needed to be used in many different components.
something called the Store manages all of our states with Redux, so the component is only focused on dispatching the changes in state to the store, the store is an excellent example of "Single Source of Truth", it takes a lot of abstraction away from the idea of where state changes go to be stored. Interestingly Redux has this immutability quality - which is a fancy way of saying we don't change the state object and its props per-se, rather Redux makes a new object, calculating the new application state and updates it with the newly created object. You may wonder why it goes through all this trouble, its important to note that your previous states are valuable information, if you increment a count function, it needs to know what its incrementing onto - the previous state is its only point of reference.
State in redux is "read-only", meaning we can't change it, well, sort-of. The only way to change the state is to 'emit' or dispatch an action, an object describing what happened.
The store object itself has a very small API considering what it's capable of, it only has four methods
The store object itself has a very small API considering what it's capable of, it only has four methods
no set state method... that's for sure. the dispatch() method is almost certainly the most important thing to grasp here. the method sends an object to Redux, known as an action. typically the action can be described as a "payload" that carries a "type" along with the other data that could be used to update the state.
The third major concept crucial to understanding redux
Changes are made with Pure Functions
Given we understand Redux doesn't allow the application to make direct state changes, instead the dispatched action "describes" the state change. Reducers are just the pure function I mean, they're functions you'll write to handle whatever the dispatched action was and define HOW the app state changes. The general data flow can be represented as:
Changes are made with Pure Functions
Given we understand Redux doesn't allow the application to make direct state changes, instead the dispatched action "describes" the state change. Reducers are just the pure function I mean, they're functions you'll write to handle whatever the dispatched action was and define HOW the app state changes. The general data flow can be represented as:
** Quick overview on React Redux setup **
Installation
//create new react app
$ npm install -g create-react-app
$ create-react-app < APP-NAME >
//(optional) install Yarn
$ npm install --global yarn
//install redux
$ npm install redux
$ npm install react-redux First up, lets create the store
import { createStore } from 'redux'
createStore(reducer, [preloadedState], [enhancer]) How do we access the store? something called Provider is going to wrap our App.
import { Provider } from 'react-redux'
<Provider store={store}>
</Provider>,
) allowing that access ** {connect} ** needs to be imported, so when we export our component, we export it with connect.
import { connect } from 'react-redux';
export default connect(mapStateToProps, mapDispatchToProps)(ComponentName); last big one ** mapStatetoProps ** or ** mapDispatchToProps **
lets use Panda's for example.
lets use Panda's for example.
const mapStateToProps = (state) => ({ pandas: state.pandas })
const mapDispatchToProps = (dispatch) => {
return {
createPanda: (panda) => dispatch({ type: 'CREATE_PANDA', character }),
}
} Given what we have above, we've exemplified merely the methods required for just getting information to the store, and the steps along the way. Some of the 'cons' you'll hear about Redux is that it requires a serious critical mass of boilerplate code just to get started doing the things we want to end up utilizing redux for. If you think your app will be robust enough to take full advantage to the features redux has to offer, I highly recommend using Redux.