Drcus | 王亚振

Drcus | 王亚振

随便写,记录点东西

react react-redux redux 配合

发布于:  

进阶段梳理一下对React, Redux 的学习与理解

首先是单向数据流, 所有页面的数据都交由state来管理, 相当于应用的一个小型数据库一样 所有的交互都是通过action来传递的,可以理解为事件,事件可以携带数据 一个约定俗成的做法是通过创建函数来生成action对象, 而不是使用内联。

Redux不是一个单一的框架,而是一系列的约定和让它们协同工作的函数。 你的 Redux 项目的主体代码甚至不需要使用 ReduxAPI,大部分时间你其实是在编写函数。

Action

Action 就是一个描述“发生了什么”的普通对象。

export const LOGIN_REQUEST = 'LOGIN_REQUEST';
export const LOGIN_SUCCESS = 'LOGIN_SUCCESS';
export const LOGIN_FAILURE = 'LOGIN_FAILURE';
export const TABLE_FILTER = 'TABLE_FILTER';

通常ActionTypes是单独放在一个文件中,用的时候再导入

export function filterTableData(word, table) {
  return {
    type: TABLE_FILTER,
    table,
    word
  }
}

Action 则定义一个函数返回一个 Action 对象

Middleware

中间件是在action 发起后 到达reducer之前发生的一个拦截操作

const logger = store => next => action => {
  console.group(action.type);
  console.info('dispatching', action);
  let result = next(action);
  console.log('next state:', store.getState());
  console.groupEnd(action.type);

  return result
};

export default logger

这是一个完整的打印日志的 middleware 这正是 Redux middleware 的样子。

Reducer

Action 只是描述了有事情发生了这一事实,并没有指明应用如何更新 state。而这正是 reducer 要做的事情。 文档中有讲到 谨记 reducer 一定要保持纯净。只要传入参数一样,返回必须一样。没有特殊情况、没有副作用,没有 API 请求、没有修改参数,单纯执行计算。 复杂的操作可以放到 middleware 中进行

function login(state = {}, action) {
  switch (action.type) {
    case LOGIN_SUCCESS: return Object.assign({}, state, action.data);
    case LOGIN_FAILURE: return Object.assign({}, state, action.data);
    default: return state;
  }
}

这是 reducer 其中的一个函数 需要注意的是 redux 提供了 combineReducers 来链接所有的 reducer 生成一个 rootReducer 来给 store 管理使用

const hedgeApp = combineReducers({
  login,
  register
});

export default hedgeApp;

这里的 loginregister 都是从全局state中分离出来的一个属性,在函数内单独管理 login 函数管理的就是 state.login

注意

还有需要注意的一点是 reducer 返回的state 必须要以扩展对象的方式

  1. 不要修改 state。使用 Object.assign() 新建了一个副本。不能这样使用 Object.assign(state, { visibilityFilter: action.filter }),因为它会改变第一个参数的值。你必须把第一个参数设置为空对象。 如: return Object.assign({}, state, {newState})
  2. default 情况下返回旧的 state。遇到未知的 action 时,一定要返回旧的 state

Store

redux 提供的 createStore , applyMiddleware , compose

export default function createStore(data) {
 const middleware = applyMiddleware(
   apiMiddleware, pageflowMiddleware, countdownMiddleware, log
 );

 const DevTools = require('../components/DevTools/DevTools');
 const finalCreateStore = compose(
   middleware,
   DevTools.instrument()
 )(_createStore);

 const store = finalCreateStore(hedgeApp, data);

 return store;
}

从这里可以看到 上面自定义的 'middleware' 可以通过 applyMiddleware 来装载应用

搭配React

ReduxReact 之间没有关系。Redux 支持 ReactAngularEmberjQuery 甚至纯 JavaScript。 尽管如此,Redux 还是和 ReactDeku 这类框架搭配起来用最好,因为这类框架允许你以 state 函数的形式来描述界面,Redux 通过 action 的形式来发起 state 变化。

安装 React Redux

npm install --save react-redux

react-redux 就是ReduxReact 的绑定库

连接Redux

就是普通的React 组件

import React, { Component, PropTypes } from 'react';

class Login extends Component {
	render() {	    
	    return (<h3>Welcome to IN+</h3>)
    }
}
export default connect(
  state => ({ login: state.login }), // 基于全局 state ,哪些是我们想注入的 props ?
  { handleLogin }
)(Login);

首先获取react-redux提供的Provider 然后传入上面创建的 store Provider应该作为根组件 任何一个从 connect() 包装好的组件都可以得到一个 dispatch 方法作为组件的 props,以及得到全局 state 中所需的任何内容。 必须调用connect() 才能使组件获取state的数据 connect() 接收第一个参数 为函数mapStateToProps , 第二个是mapDispatchToProps 返回的必须都是对象


文档中的一个示意图

                 _________               ____________               ___________
                |         |             |            |             |           |
                | Action  |------------▶| Dispatcher |------------▶| callbacks |
                |_________|             |____________|             |___________|
                     ▲                                                   |
                     |                                                   |
                     |                                                   |
 _________       ____|_____                                          ____▼____
|         |◀----|  Action  |                                        |         |
| Web API |     | Creators |                                        |  Store  |
|_________|----▶|__________|                                        |_________|
                     ▲                                                   |
                     |                                                   |
                 ____|________           ____________                ____▼____
                |   User       |         |   React   |              | Change  |
                | interactions |◀--------|   Views   |◀-------------| events  |
                |______________|         |___________|              |_________|

到此为止。

厚颜一下 ~^_^~

赏赐