redux介绍与入门

一、什么是flux

　　1.redux的设计思想与flux是差不多一样的，所以我们先来了解什么flux

　　2.flux是一种设计模式或者说是框架。以mvc模式来划分的话react是mvc中的view, flux相当于mc,m就是model c就是control。那么我们就明白flux到底是什么了，看下图： 

 

　　flux包含四个部分 Store、Dispatch、Action、View,其中Store就对应着model，Dispatch、Action就组合成了Control。这么划分仅仅是帮助全局理解flux到底是什么。

　　3.flux就是一种设计模式,当view或者用户产生一个Action时，Dispatch会解析Action根据不同的Action修改Store，被修改的Store会发消息通知View说：我已经修改了过来取我并更新你自己吧。

　　4.一个简单例子

// store
var Store = {
 state:{
  loginData:{
   type:'login',
   data:'no login',
  },
  logoutData:{
   type:'logout',
   data:'',
  }
 },
 login:function(data){
  this.state.loginData = data;
 },
 logout:function(data){
  this.state.logoutData = data;
 },
 getState:function(){
  return this.state;
 },
 sendEvent:function(){
  this.callback();
 },
 addChangeListener: function(callback) {
     this.callback = callback;
   },
   removeChangeListener: function(callback) {
    }
}
 
// Dispatch
var Dispatcher = require('flux').Dispatcher;
var dispatch = new Dispatcher();
dispatch.register(function(payload){
 switch (payload.type){
  case 'login' :
   Store.login(payload);
   Store.sendEvent();
   break;
  case 'logout':
   Store.logout(payload);
   Store.sendEvent();
   break;
 }
});
 
 
// View
Store.addChangeListener(()=>{
 console.log('{
loginData:{type:'+Store.getState().loginData.type + ' data:' + Store.getState().loginData.data+ '}');
 console.log('logoutData:{type:'+Store.getState().logoutData.type + ' data:' + Store.getState().logoutData.data+ '}
}');
});
 
 
// Action
var loginAction = { 
 type: 'login',
 data: 'login sucessed'
};
var logoutAction = { 
 type: 'logout',
 data: 'logout sucessed'
};
console.log('登录....');
dispatch.dispatch(loginAction);
console.log('退出....');
dispatch.dispatch(logoutAction);

二、redux

　　1.我们先看看看官网的一个例子

var Redux = require('redux')
var createStore = Redux.createStore

function counter(state = 0, action) {
  switch (action.type) {
  case 'INCREMENT':
    return state + 1
  case 'DECREMENT':
    return state - 1
  default:
    return state
  }
}
// 创建store
let store = createStore(counter)
store.subscribe(() =>
  console.log(store.getState())
)

store.dispatch({ type: 'INCREMENT' })
// 1
store.dispatch({ type: 'INCREMENT' })
// 2
store.dispatch({ type: 'DECREMENT' })
// 1

　　可以看到redux与flux原理是一样的，只是实现不一样。

　　1.redux把dispatch封装到了Store里

// 所以我们可以直接通过store来发送dispatch
store.dispatch({ type: 'INCREMENT' })

　　2.抽象出一个reducer概念（counter就是一个reducer），reducer就是一个[根据不同的dispatch处理并生产新的state的一个程序]。

// 处理自增、或者自减的程序
function counter(state = 0, action) {
  switch (action.type) {
  case 'INCREMENT':
    return state + 1
  case 'DECREMENT':
    return state - 1
  default:
    return state
  }
}

　　要理解redux，其实就是要理解Redux提供的Store与reducer。　

三、react中使用redux

　　我们将会重头创建一个React-native项目，然后加入redux框架　

#初始化一个react-native项目
$ react-native init reduxTest
$ cd reduxTest/ios
$ open reduxTest.xcodeproj
#这样就创建并打开了一个iOS的react-native项目

　　1.添加app.js

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TouchableHighlight
} from 'react-native';
class App extends Component {
  onPress(){

  }
  render() {
    let welcome = this.props.appInfo?this.props.appInfo.welcome:'Welcome to Redux test!'
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          {welcome}
        </Text>
        <TouchableHighlight onPress={this.onPress.bind(this)}>
          <Text >
            Click me!
          </Text>
        </TouchableHighlight>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
});
module.exports = App;

　　2.修改reduxTest/index.ios.js

import React, { Component } from 'react';
import {
  AppRegistry,
} from 'react-native';
import App from './app'
export default class reduxTest extends Component {
  render() {
    return (
      <App></App>
    );
  }
}
AppRegistry.registerComponent('reduxTest', () => reduxTest);

　　这时候我们得到一个简单的测试app，下面我通过redux来管理app组件的state（redux把state映射到props）。

　　效果：当点击Click me! 按钮时，会吧welcome信息改为 have clicked！

　　具体流程就是：

　　(1).点击 Click me! 按钮 ，会通过redux的Store发送一个dispatch给reducer，reducer把welcome改为‘have clicked’

　　(2).然后redux会通知app 组件重新渲染

　　3.安装redux、react-redux、redux-thunk

$ npm install redux --save 
$ npm install react-redux --save
$ npm install redux-thunk --save

　　3.直接上源码，代码后面有解释

　　总共涉及4个文件，需要重点关注的代码将会被标红。

• index.ios.js　--  创建store　
• app.js  　　  --  根据store的改变做出相应的处理、用户点击时发出action
• reducer.js    --  处理action 
• action.js      --  具体的action

　　index.ios.js:

import React, { Component } from 'react';
import {
  AppRegistry,
} from 'react-native';

import App from './app'
import appReducer           from './reducer'

import {createStore,
  applyMiddleware}        from 'redux';
import {Provider}           from 'react-redux';
import thunk                from 'redux-thunk';

let store = createStore(appReducer,
  applyMiddleware(thunk)              // 用于异步的action
);

export default class reduxTest extends Component {
  render() {
    return (
      <Provider store={store}>
        <App></App>
      </Provider>

    );
  }
}
AppRegistry.registerComponent('reduxTest', () => reduxTest);

　　解析

　　这里引入了四个redux相关组件

• createStore　　      --- 是一个函数，用于创建store
• applyMiddleware    --- 是一个函数，用于使用中间件
• hunk                     --- 是一个函数，是中间件用于使action函数支持异步；
• Provider                --- 是一个react组件，主要提供一个全局的store使得它的子组件都能访问到

　　创建store的代码：

let store = createStore(
    appReducer,
    applyMiddleware(thunk)     // 用于异步的action
);
/**
    @appReducer ：是一个reducer，我们说过是用于处理action的。
    @applyMiddleware(thunk) : 应用一个叫thunk的中间件，任何一个action执行前会先执行thunk

    这里我们应该记住：
    store提供一个保存state的地方
    store也提供了一个发出dispatch的方法
    store也提供了一个监听state的方法  
*/

　　Provider：Provider是提供者，意思就是给他的子组件提供一个store，这个store就是我们上面创建的。

　　app.js:

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TouchableHighlight
} from 'react-native';
import {connect}        from 'react-redux';
import {bindActionCreators}  from 'redux';

import WelcomeAction from './action'

class App extends Component {
  // 定义 上线文里store属性的类型为object
  static contextTypes = {
    store: React.PropTypes.object
  }
  componentDidMount() {
    // store的作用1: 监听state的变化
    const { store } = this.context;
    store.subscribe(
      ()=>{
        // store的作用2: 获取state
        let state = store.getState();
        // state改变了
        console.log('state:',state);
      }
    );
  }
  onPress(){
    // 1.直接用store发生dipatch
    let action = {
      type:'welcome',
      data:{
        text:'have clicked from app.js',
      }
    }
    // store的作用3: 发送dispatch
    this.context.store.dispatch(action)
    
    // this.props.onPressAction()
  }
  render() {
    let welcome = this.props.welcome
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          {welcome}
        </Text>
        <TouchableHighlight onPress={this.onPress.bind(this)}>
          <Text >
            Click me!
          </Text>
        </TouchableHighlight>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
});
function mapStateToProps(state) {
  return {
    welcome: state.welcome
  }
}
function mapDispatchToProps(dispatch) {
  return {
    onPressAction:bindActionCreators(WelcomeAction,dispatch),
  }
}
module.exports = connect(mapStateToProps,mapDispatchToProps)(App);

　　解析

　（1）获取store

　　因为app组件是Provider组件的子组件，所以app组件跟Provider组件是共享一个context（上下文）的 --- 这个是react的规定，不了解的请自行补相应知识。

　　只要在app组件定义一下store的类型就能使用了

// 定义 上线文里store属性的类型为object
  static contextTypes = {
    store: React.PropTypes.object
  }
// 通过下面就能获取到store
this.context.store

　　这个store是与创建Provider时传入的store是同一个

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

　（2）使用store

　　获取到store之后我们就可以用于发送dispatch、监听state了

　　发送dispatch：

    let action = {
      type:'welcome',
      data:{
        text:'have clicked from app.js',
      }
    }
    // store的作用3: 发送dispatch
    this.context.store.dispatch(action)

 　  action参数是一个对象，对象结构没有做要求。

　　action被dispatch之后会被reducer处理，处理完后就会发一个通知说state已经更新了。

　　通过下面代码来监听通知

// store的作用1: 监听state的变化
    const { store } = this.context;
    store.subscribe(
      ()=>{
        // store的作用2: 获取state
        let state = store.getState();
        // state改变了
        // 根据state做相应的渲染
        console.log('state:',state);
      }
    );

　我看下面的reducer是怎么处理action的

　reducer.js:

function Reducer(state = {welcome:'Welcome to Redux test!'}, action) {
  switch (action.type) {
    case 'welcome':
      return {welcome:action.data.text};
    default:
      return state
  }
}
module.exports = Reducer;

　　解析：

　　很简单的处理，如果action的type等于‘welcome’的话，就直接返回一个对象{welcome:action.data.text};

　　监听者收到的就是这个返回的对象。

　　值得注意，Reducer的参数 state = {welcome:'Welcome to Redux test!'}，是state的默认值

---------------------------------------------------------------------

　　每次都通过this.context.sotre来dispatch、subscribe，大家都觉得很烦，好吧redux已经做了封装：

　　引入两个组件：

• connect   ----  用于封装App组件
• bindActionCreators   --- 绑定action的构造者

　　具体使用：

function mapStateToProps(state) {
  return {
    welcome: state.welcome
  }
}
function mapDispatchToProps(dispatch) {
  return {
    onPressAction:bindActionCreators(WelcomeAction,dispatch),
  }
}

module.exports = connect(mapStateToProps,mapDispatchToProps)(App);

　　解析：

　　function mapStateToProps(state)

　　正如函数名所表示，它的作用就是把state映射到props上。这里的state是指store保存的state，props是指app组件的props。

　　这个函数需要返回一个对象

return {
    welcome: state.welcome
  }

　　然后通过connect组件封装一下

module.exports = connect(mapStateToProps,mapDispatchToProps)(App);

　　这样子，在app组件内部就能通过this.props.welcome来获取store保存的state对应的welcome的值了，是不是分方便？

　　既然state能映射到props,那么dispatch action也能映射

import WelcomeAction from './action'

function mapDispatchToProps(dispatch) {
  return {
    onPressAction:bindActionCreators(WelcomeAction,dispatch),
  }
}
module.exports = connect(mapStateToProps,mapDispatchToProps)(App);

　　上面的代码意思就是吧dispatch映射到props上，dispatch是sotre的dispatch，props是app的props.

　　我们可以这样直接发出一个action,

this.props.onPressAction()

　　onPressaction（）等同于  WelcomeAction

　　WelcomeAction是什么请看往下看：

　　action.js:

function WelcomeAction () {
  // 异步
  return (dipatch, getState) => {
    return new Promise((resolve,reject)=>{
      setTimeout(()=>{
        let action = {
          type:'welcome',
          data:{
            text:'have clicked??',
          }
        }
        dipatch(action);
        resolve();
      },2000);
    });
  }
  // 同步
  // return {
  //   type:'welcome',
  //   data:{
  //     text:'have clicked',
  //   }
  // }
}
module.exports = WelcomeAction　　 

　　WelcomeAction函数用到dispatch等于store.dispatch

 　 这样做的目的是把action独立出来方便单独管理。

　　action函数，如果需要异步执行就返回一个Promise，同步执行可以直接返回一个新的state　　

　　值得注意如果action函数需要异步执行，在创建store的时候必须使用中间件trunk

import thunk                from 'redux-thunk';

let store = createStore(
    appReducer,
    applyMiddleware(thunk)              // 用于异步的action
);