reduxredux入门


备注

Redux是一个JavaScript库,它实现了基于Flux的体系结构的状态容器。

Redux可以用三个基本原则来描述:

  1. 单一来源(单店)
  2. 状态是只读的(需要采取行动来发出变化)
  3. 使用纯函数进行更改(根据操作创建新状态)

主要部分:

  • 存储构造函数
  • store.dispatch(动作)
  • 中间件
  • 减速机

Redux非常简单。它使用一个名为reducer的函数(一个从JavaScript reduce方法派生的名称),它接受两个参数:一个动作和一个下一个状态。

reducer可以访问当前(很快将是前一个)状态,将给定的操作应用于该状态,并返回所需的下一个状态。

减速器设计为纯函数;意思是,它们没有副作用。如果将相同的输入值传递给减速器100次,您将获得完全相同的输出值100次。没有什么奇怪的事情发生。它们完全可以预测。作为在我的显示器上有一个突出的“没有惊喜”粘滞便笺的人,这是一个很好的想法。

Reducers不存储状态,并且它们不会改变状态。他们被传递状态,他们返回状态。这就是减速器在行动中的样子。 http://redux.js.org/docs/basics/Reducers.html

参考: http//redux.js.org/docs/introduction/Motivation.html

版本

版本发布日期
V3.6.0 2016年9月4日
V3.5.0 2016年4月20日
v3.4.0 2016年4月9日
3.3.0 2016年2月6日
V3.2.0 2016年2月1日
V3.1.0 2016年1月28日
V3.0.0 2015年9月13日
V2.0.0 2015年9月1日
V1.0.0 2015年8月14日

安装或设置

基本安装:

您可以使用此链接下载redux javascript文件。

您也可以使用bower安装redux:

bower install https://npmcdn.com/redux@latest/dist/redux.min.js
 

接下来,您需要在页面中包含redux:

<html>
  <head>
    <script type="text/javascript" src="/path/to/redux.min.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script>
      // Redux is available as `window.Redux` variable.
    </script>
  </body>
</html>
 

Npm安装:

如果您使用的是npm ,要安装redux,您需要运行:

npm install redux --save
 

接下来,要使用redux,您需要它(假设您正在使用模块捆绑器,如webpack ):

var redux = require('redux');
 

或者如果你使用es6 transpiler,就像babel一样:

import redux from 'redux';
 

Vanilla Redux示例(不含React或其他)

您可以点击此处查看正在运行的演示。

HTML:

<p>
  <span>Counter State</span><br />
  (<em>Will increase each minute</em>):
  <p>
    <span id="counter-state" style="font-weight: bolder"></span>
  </p>
</p>

<p>
  <button id="increment-action">+ Increase +</button>
  <button id="decrement-action">- Decrease -</button>
</p>
 

REDUX LOGIC:

// ------------------------ reducer helpers ------------------------
let reducers = {}

let addReducer = (reducers, actionType, reducer) =>
  reducers[actionType] = (state, action) => {
    if (action.type == actionType) {
      return reducer(state, action)
    }
  }

let reducer = (state, action) => {
  if (reducers[action.type]) {
    return reducers[action.type](state, action)
  }
  return state
}


// ------------------------ redux setup ------------------------

const { 
  createStore,
  applyMiddleware
  } = Redux


// apply logging middleware (not necessary)
// open the console to see the action logger output on each time new action dispatched
const actionLogger = ({ dispatch, getState }) => next => action => {
  console.log("action logger: action.type=%s state=%d", action.type, getState())
  return next(action)
}


// ------------------------ reducers ------------------------
// those will be creating new states and returning it,
// depending on the dispatched actions
addReducer(reducers, 'INCREMENT', (state, action) => ++state)
addReducer(reducers, 'DECREMENT', (state, action) => --state)


const DEFAULT_STATE = 0

const store = createStore(
  reducer, 
  DEFAULT_STATE, 
  applyMiddleware(actionLogger)
);


console.log(createStore)


// ------------------------ rendering ------------------------
let render = () => document.getElementById('counter-state').innerHTML = store.getState()

//
// IMPORTANT BINDING:
//
// store will be dispatching the new state to the render method each time the state changes
//
store.subscribe(render)

//
// render with the state for the first time
//
render()



// ------------------------ redux actions ------------------------

// continously increment the counter (the state) each second
setInterval(() => store.dispatch({type: 'INCREMENT'}), 1000)

// only increment the counter on click to the increase button
document
  .getElementById('increment-action')
  .addEventListener('click', () => store.dispatch({type: 'INCREMENT'}))

// only decrement the counter on click to the decrease button
document
  .getElementById('decrement-action')
  .addEventListener('click', () => store.dispatch({type: 'DECREMENT'}))