Redux、React-Redux

Redux

redux 是一个独立专门用于做状态管理的 JS 库(不是 react 插件库)

作用: 集中式管理 react 应用中多个组件共享的状态

一、Redux工作流程：

二、下载

 npm install --save redux

三、Redux使用情况：

1. 总体原则: 能不用就不用, 如果不用比较吃力才考虑使用
2. 某个组件的状态，需要共享
3. 某个状态需要在任何地方都可以拿到
4. 一个组件需要改变全局状态
5. 一个组件需要改变另一个组件的状态

四、三个核心

1、action

1. 标识要执行行为的对象
2. 属性

• type: 标识属性, 值为字符串, 唯一, 必要属性
• data: 数据属性, 值类型任意, 可选属性

3. 例子:

    const action = {
    	type: 'INCREMENT',
    	data: 2
    }
   

4. Action Creator(创建Action的工厂函数)

    const increment = (number) => ({type: 'INCREMENT', data: number})
   

2、reducer

1. 根据老的state和action, 产生新的state的纯函数

2. 例子

    export default function counter(state = 0, action) {
      switch (action.type) {
        case 'INCREMENT':
          return state + action.data
        case 'DECREMENT':
          return state - action.data
        default:
          return state
      }
    }
   

3. 注意

• 返回一个新的状态
• 不要修改原来的状态

3、store

1. 将state,action与reducer联系在一起的对象

2. 生成store

    import {createStore} from 'redux'
    import reducer from './reducers'
    const store = createStore(reducer)
   

3. API

    getState()  // 得到state
    dispatch(action)   // 分发action, 触发reducer调用, 产生新的state
    subscribe(listener)   // 注册监听, 当产生了新的state时, 自动调用
   

五、问题

• redux与react组件的代码耦合度太高
• 编码不够简洁

React-Redux

一个react插件库, 专门用来简化react应用中使用redux

一、组件分类

1. UI组件

• 只负责 UI 的呈现，不带有任何业务逻辑
• 通过props接收数据(一般数据和函数)
• 不使用任何 Redux 的 API

2. 容器组件

• 负责管理数据和业务逻辑，不负责UI的呈现
• 使用 Redux 的 API

二、下载

npm install --save react-redux

三、相关API

1. Provider

   让所有组件都可以得到state数据

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

2. connect()

   用于包装 UI 组件生成容器组件

    import { connect } from 'react-redux'
    connect(
        mapStateToprops,
        mapDispatchToProps
    )(Counter)
   

3. mapStateToprops()

   将外部的数据（即state对象）转换为UI组件的标签属性

    const mapStateToprops = function (state) {
        return {
            value: state
        }
    }
   

4. mapDispatchToProps()

   将分发action的函数转换为UI组件的标签属性, 简洁语法可以直接指定为actions对象或包含多个action方法的对象

四、问题

• redux默认是不能进行异步处理的,
• 应用中又需要在redux中执行异步任务(ajax, 定时器)

redux 异步

一、下载异步中间件

npm install --save redux-thunk

二、引入

index.js

import {createStore, applyMiddleware} from 'redux'
import thunk from 'redux-thunk'
import {reducer} from './redux/reducers'
const store = createStore(
  reducer,
  applyMiddleware(thunk) // 应用上异步中间件
)