redux安装及其简单使用

# redux

!!!注意：一个项目中，redux和mobx只能存在一个

## 三大原则

单一数据源

state 是只读的

使用纯函数来修改执行

### 安装

yarn add redux

yarn add react-redux

### 引入

在Router.js中引入

import {Provider} from 'react-redux'

import Store from './store/store.js'

将App进行包裹

<BrowserRouter>
    <Provider store={Store}>
      <App />
    </Provider>
  </BrowserRouter>

### store/store.js

import { createStore, combineReducers } from 'redux';

import { reducer as addReducer } from './views/action/_index.js';

const reducer = combineReducers({
  add: addReducer,
  // remove:removeReducer,
  // edit:editReducer,
})

export default createStore(reducer);

具体页面中的reducer

  每个页面都有一个redux

  创建一个Action  唯一能修改state

  创建一个ActionTypes.js 具体定义types  目的就是方便管理

  创建一个Reducer.js 纯函数

页面

引入

connect

第一个参数是获取到redux,整个Store

第二个参数

  不传，只为null，当前的index.jsx

  默认this.props.dispatch

  传了，自定义方法 在props就可以使用