94 lines
3.3 KiB
Markdown
94 lines
3.3 KiB
Markdown
|
---
|
|||
|
|
title: Redux
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## Redux
|
|||
|
|
|
|||
|
|
Redux is a predictable state container for JavaScript apps.
|
|||
|
|
|
|||
|
|
It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. On top of that, it provides a great developer experience, such as live code editing combined with a time traveling debugger.
|
|||
|
|
|
|||
|
|
Basic Principles of Redux:
|
|||
|
|
1. Redux is a state container, it stores all of your state in one place
|
|||
|
|
2. The state is read only, the only way to change state is to dispatch an action.
|
|||
|
|
3. State can only be changed by pure functions or in another term: Reducers. Redux Reducers take in the previous state and an action object and returns the next state.
|
|||
|
|
|
|||
|
|
In practical terms how do we use Redux exactly?
|
|||
|
|
### RULE 1
|
|||
|
|
#### Where is this state stored? Redux supplies you a handy function called
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
createStore()
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Where you create the store that will hold all your state.
|
|||
|
|
|
|||
|
|
### RULE 3 (I’m going to show rule 3 first since it will make more sense)
|
|||
|
|
#### State can only be changed by a pure function aka a reducer so to create this connection we will pass in our reducer to createStore() like so
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
var store = createStore(reducer)
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
It gets more complicated when you have more reducers but at the core, the store now has a reducer attached to it
|
|||
|
|
|
|||
|
|
### RULE 2
|
|||
|
|
#### Once we have a store that is created with store = createStore(reducer). The new store we created has a method called dispatch. Remember in rule 2 the only way we can change the state is to dispatch an action!
|
|||
|
|
|
|||
|
|
You can see where this is going.
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
store.dispatch(action)
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Before I get into what a reducer and an a action is I think showing you a very basic and limited implementation of Redux’s createStore() will help greatly.
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
createStore = (reducer) => {
|
|||
|
|
let state;
|
|||
|
|
//dispatch method
|
|||
|
|
dispatch = (action) => {
|
|||
|
|
state = reducer(state, action)
|
|||
|
|
}
|
|||
|
|
return {dispatch}
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
See how we passed in a reducer to createStore and it becomes set in our dispatch method; and when we call the dispatch method it takes in an action and it sets a new state based on what reducer will return.
|
|||
|
|
|
|||
|
|
## What is a Reducer? What is an Action?
|
|||
|
|
An Action at the most basic level is an object that has a property called type. It can also have other properties but for simplicity it will only have type.
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
var someAction = {type:'doSomething'}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
A reducer is just a function:
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
var reducer = (state, action) => {
|
|||
|
|
|
|||
|
|
if (action.type === 'doSomething'){
|
|||
|
|
return changedState;
|
|||
|
|
} else if ( action.type === 'doSomethingElse'){
|
|||
|
|
return changedState;
|
|||
|
|
} else {
|
|||
|
|
return state
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
The action that we pass into a reducer will determine how the state will be changed depending on the type.
|
|||
|
|
Redux does get more complicated but if you understand these principles then you will have an easier time navigating through react-redux projects!
|
|||
|
|
|
|||
|
|
#### More Information:
|
|||
|
|
|
|||
|
|
##### Do you really need Redux?
|
|||
|
|
[Dan Abramov](https://github.com/gaearon), creator of Redux, wrote some time ago great article [You Might Not Need Redux](https://medium.com/@dan_abramov/you-might-not-need-redux-be46360cf367). You should check it first because, well, you might not need it.
|
|||
|
|
|
|||
|
|
For more information head to [http://redux.js.org/](http://redux.js.org/)
|
|||
|
|
|
|||
|
|
### Resources
|
|||
|
|
|
|||
|
|
- [A course from Dan Abramov, the author of Redux.](https://egghead.io/courses/getting-started-with-redux)
|