你的位置:首页 > Java教程

[Java教程]我眼中的Redux


一直觉得有些概念还离着自己比较远,比如ES6,比如React,比如Redux,虽说这些概念早已经火的一塌糊涂,每天逛微博知乎到处都是他们的身影,但感觉好像和自己没什么关系。不过最近要开始一个新的项目,一个webapp,开始依然像我以前一样,顶级组件处理处理逻辑和数据,数据通过组件属性分发下去,逻辑通过事件分发下去,这时候产生一个问题,所有的逻辑顶级组件处理,顶级组件会越来越臃肿,对于嵌套层级较多的组件,事件需要一级级的传递。这时候需要拆分顶级组件的逻辑,最好子组件也能操作逻辑,但数据依然只有一份,Redux好像可以解决这个问题。

 

Redux有四个核心内容:state、Action、Reducer和Store。

 

state是唯一的数据源,我们在应用内需要保证数据源的唯一。

 

Action定义了一系列的动作,获取数据的操作可以在这里处理,比如ajax之类。可以使用Action Creator定义action,Action Creator就是一个普通的函数,返回一个普通的对象,其中type字段是必须的,其他随意。比如定义一个发送文本消息的action:

var sendTextMsg = function(to, msg) {  return {    type: 'SEND_TEXT_MSG',    to: to,    msg: msg  }}

这里需要注意的是通常我们的Action不会是像上面的同步操作,而是异步操作(ajax等),这时需要使用Redux提供的中间件的概念,Redux提供了一个用于此的中间件:redux-thunk。 上面的 sendTextMsg (我们加入一个延迟操作)方法需要改成:

var sendTextMsg = function(to, msg) {  return function(dispatch) {    setTimeout(function() {      dispatch({        type: _c.actionTypes.SEND_TEXT_MSG,        to: to,        msg: msg      })    }, 2000)  }}

 

Reducer根据action的type和数据操作返回新的state,Redux作者建议不要直接操作state,而是始终返回新的state。

var imApp = function(state, action) {  if(typeof state === 'undefined') {    return initialState;  }  switch(action.type) {    case 'SEND_TEXT_MSG':      // magic code      return state;    case 'SEND_IMAGE_MSG':      // magic code      return state;    default:      return state;  }}

 

Store用于将Reducer和Action联系起来,使用 Redux.createStore(reducer) 创建一个store。得到store后就可以订阅reducer的动作,触发action了。

// 定义storevar store = Redux.createStore(imApp);store.subscribe(function() {  store.getState() // 获取state  // magic });store.dispatch(store.dispatch(sendTextMsg(to, con)))

如果使用redux-thunk,此处的store需要改为:

//redux-thunk源码很短var thunkMiddleware = function ({ dispatch, getState }) {  // console.log('Enter thunkMiddleware');  return function(next) {    // console.log('Function "next" provided:', next);    return function (action) {      // console.log('Handling action:', action);      return typeof action === 'function' ?        action(dispatch, getState) :        next(action)    }  }}// applyMiddleware apivar store = Redux.createStore(_t.imApp, Redux.applyMiddleware(thunkMiddleware));

 

下面是我画的一张Redux的关系图:

redux

 

本文只是我对Redux极其粗浅的理解,更多的概念我还没有涉及到。

参考: Redux 中文文档 

         Redux Tutorial 中文翻译

 

新博客地址: http://darkzone.applinzi.com/