Redux&dva

Redux出现的背景

在React中数据流是单向的,顶层组件可以通过props属性向下传递数据,但是下层组件不能向上层组件传递数据.

若实现下层组件修改数据,需要上层组件传递修改数据的方法到下层组件,项目变得复杂时,数据传递就会很困难

使用Redux管理数据,由于Store独立于组件,使得数据管理独立于组件,解决了组件间的数据传递问题

Redux核心API

// 创建 Store 状态容器
const store = Redux.createStore(reducer)
// 创建用于处理状态的 reducer 函数
function reducer(state = initialState, action) {}
// 获取状态
store.getState();
// 订阅状态
store.subscribe(function() {})
// 触发Action
store.dispatch({type: 'description...'})

Redux工作流程

• Store: 是一个单一的数据源,而且是只读的
• Action: 对变化的描述
• Reducer: 负责对变化即逆行分发和处理,最终将新的数据返回给store

Redux核心代码

React+Redux工作流程

create-react-app ---| react-redux

Redux中间件

当一个中间件执行完成后,调用next方法,传递给第二个中间件,第二个中间调用next方法传递给reducer

Redux引入异步数据流

Redux-thunk

下图贴一段thunk的核心代码

function createThunkMiddleware(extraArgument) {
  return ({ dispatch, getState }) => (next) => (action) => {
    // 如果传递的时一个函数,则为异步操作,异步操作代码写在传递进来的函数中,
    // 中间件函数在调用传递进来的函数时,要将dispatch方法传递过去
    if (typeof action === 'function') {
      return action(dispatch, getState, extraArgument);
    }

    return next(action);
  };
}

const thunk = createThunkMiddleware();
thunk.withExtraArgument = createThunkMiddleware;

export default thunk;

Redux-saga

可以将异步操作从Action Creator文件中抽离出来,放在一个单独的文件中, dva就是基于redux和redux-saga的数据流方案

下面讲一下redux-saga的用法 1.创建redux-saga中间件

2. 注册sagaMiddleware

3. 使用saga接收action执行异步操作

• takeEvery: 接收action
• put: 触发另外一个action,如异步操作返回结果以后,通过put方法,将结果传递给reducer, 保存在store中