Redux 学习笔记

1：首先安装redux：

npm install --save redux

2：引入redux ：

import { createStore } from 'redux';

//首先创建执行函数，Reducer 是一个函数，
//它接受 Action 和当前 State 作为参数，返回一个新的 State。
function counter(state, action) {
  switch (action.type) {
  case 'INCREMENT':
    return state + 1;
  case 'DECREMENT':
    return state - 1;
  default:
    return state;
  }
};

//Redux 提供createStore这个函数，用来生成 Store
let store = createStore(counter,10);//createStore方法还可以接受第二个参数，表示 State 的最初状态。这通常是服务器给出的。

//Store 允许使用store.subscribe方法设置监听函数，一旦 State 发生变化，就自动执行这个函数
store.subscribe(() =>
  alert(store.getState())//当前时刻的 State，可以通过store.getState()拿到。
);

store.dispatch({ type: 'INCREMENT' });//store.dispatch接受一个 Action 对象作为参数，将它发送出去(dispatch分派的意思)

3：以下两种方式是等价的：

一级父组件：

<TodoList
              todos={[{
                text: 'Use Redux',
                completed: true
              }, {
                text: 'Learn to connect it to React',
                completed: false
              }]}
 } />

二级父组件：

const TodoList = React.createClass (
  {
    render() {
      return (
        <View>
          {this.props.todos.map((todo, index) =>
            <Todo
                  text={todo.text}
                  completed = {todo.completed}
          )}
        </View>
      )
    }
  }

) 

三级子组件：

const Todo = React.createClass({
 render() {
    return (
      <JDText
        {this.props.text}
      </JDText>
    );
  }
})

其中 二级父组件还可以这样写：

const TodoList = React.createClass (
  {
    render() {
      return (
        <View>
          {this.props.todos.map((todo, index) =>
            <Todo {...todo}
                  key={index}
                  onClick={() => this.props.onTodoClick(index)} />
          )}
        </View>
      )
    }
  }
) 

4：关于export default 和 module.exports 区别　

　　　　　　　　　　　　　　　　　　　　　　　　module.exports是CommonJS的模块规范

　　　　　　　　　　　　　　　　　　　　　　　　export default是ES2015的模块规范

加载方式	规范	命令	特点
运行时加载	CommonJS/AMD	require	社区方案，提供了服务器/浏览器的模块加载方案。非语言层面的标准。只能在运行时确定模块的依赖关系及输入/输出的变量，无法进行静态优化。
编译时加载	ESMAScript6+	import	语言规格层面支持模块功能。支持编译时静态分析，便于JS引入宏和类型检验。动态绑定。

使用方法：

方法一：统一使用ES6规范

使用export default connect(select)(App);抛出，

则使用import App from './containers/App'接受；

方法二：统一使用CommonJs规范

使用module.exports = connect(select)(App);抛出，

则使用const App = require('./containers/App');接受；