[Three yuan learn Redux] Redux workflow and engineering coding guidelines

First, what is the Redux?

JavaScript is Redux state of the container, providing predictable of state management. It is designed for React.js this door frame design, but not only for react, can be used for any interface library.

Why React.js need this state container management?

First, what is clear React, according to the official definition, React just frame a view layer, the solution is to render the problem of data with the template, but does not provide data state management program, which is a very large in large projects Pain points. For example:

Where complex applications will have this component tree structure, then the father and how non-component data transfer it? Such components as marked on the lower right corner of the blue data transfer is performed, if only react with parent-child value-passing method of assembly, the assembly needs to be passed to the parent, and then passed on by the parent assembly of a parent component and then transfer to the following sub-components ...... obviously only interaction the two components, actually use such a complex operation, very frustrating is not it? If the project is slightly complicated, even if you can develop, but also become unmaintainable. So Redux came into being. Let Redux unified management of data, any component operations on the data, are handed redux management, thus greatly improving the efficiency of development and maintenance.

Two, Redux design principles

1, a single data source

Use redux program are all stored in the internal state of a single data source Store, similar to a massive object tree.

2, state read-only

state is read-only, the only way to change the state of an external is modified by triggering action

3, pure modified function

In order to describe how action to change the state, you need to write some specific logic that write in the reducer. The reducer is that some pure function.

Pure Function: a fixed input parameter and return an output of fixed, asynchronous operation does not exist, while not modify the value of the parameter in the process.

Three, Redux workflow

Perhaps the first look not quite understand, does not matter, you can use the example of books from the library to make an analogy:

A picture is worth a thousand words, in fact, redux workflow is very simple.

Fourth, the use redux

// src/store/index.js
import { createStore } from 'redux';
import reducer from './reducer';
//通过createStore创建一个store，把reducer作为参数传入
const store = createStore(
  reducer,
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()//chrome中激活redux devtools插件
);

export default store;
复制代码

// src/store/reduce.js
const defaultState = {
  inputValue: '',
  list: []
}
export default (state = defaultState, action) => {
  if(action.type === 'add_item') {
    const newState = JSON.parse(JSON.stringify(state))
    newState.list.push(newState.inputValue)
    newState.inputValue = ''
    return newState
  }
  return state;
}
复制代码

// App.js
import React, { Component } from 'react'
import store from './store/index.js'

class App extends Component {
  constructor(props) {
    super(props);
    //从redux拿到state
    this.state = store.getState()
    //store需要通过一个方法给组件传递newState，并将这个方法传入subscribe函数的参数里面
    this.handleStoreChange = this.handleStoreChange.bind(this)
    store.subscribe(this.handleStoreChange)
  }
  render() { 
    return ( 
     //渲染部分
    );
  }
  handleStoreChange() {
    //更新组件状态
    this.setState(store.getState())
  }
}

export default App;
复制代码

  //在响应点击事件的函数中
  handleItemClick(e) {
    const action = {
        type: 'add_item',
        value: e.target.value
    }
    //由store进行action的分发
    store.dispatch(action)
  }
复制代码

Five more science to write Action

Think about it, in fact, written in response to the above action part of the function which is actually a problem, because when we input string, accidentally mistype a letter can not change the state, but this time not identify corresponding reducer type, not an error. This time may be wasting a lot of debugging time.

This time you need to write more standard action to prevent such accidents.

// src/store/actionTypes.js
export const ADD_ITEM = 'add_item'

// src/store/actionCreators.js
import { ADD_ITEM } from "./actionTypes";
export const getAddItemAction = (e) => ({
  type: ADD_ITEM
  value: e.target.value
})
// src/store/reducer.js
import { ADD_ITEM } from './actionTypes'

const defaultState = {
  inputValue: '',
  list: []
}
export default (state = defaultState, action) => {
  //这里改成ADD_ITEM
  if(action.type === ADD_ITEM) {
    const newState = JSON.parse(JSON.stringify(state))
    newState.list.push(newState.inputValue)
    newState.inputValue = ''
    return newState
  }
  return state;
}
复制代码

Then, in App.js in

//首先引入Action
import { getAddItemAction } from './store/actionCreators'
//修改响应函数
handleItemClick(e) {
    const action = getAddItemAction(e)
    store.dispatch(action)
}
复制代码

Such written in a way despite the introduction of actionTypes and actionCreators, operate more trouble, but more action to deal with managing large, complex projects, in fact, improve the efficiency of development and maintenance.

This is a preliminary summary of the redux, we want to help.

Reproduced in: https: //juejin.im/post/5d0856e951882559ed71d692