router路由库和redux使用方法

###

React-Redux使用方法：

一、基础概念

1.使用场景

React 只是 DOM 的一个抽象层，并不是 Web 应用的完整解决方案。有两个方面，它没涉及。于大型的复杂应用来说，这两方面恰恰是最关键的：

代码结构
组件之间的通信

因此，只用 React 没法写大型应用，Redux 出现，将 Flux 与函数式编程结合一起写大型项目。但是，如果UI层非常简单，没有很多互动，Redux 就是不必要的，用了反而增加复杂性。

以下场景考虑使用redux：

用户的使用方式复杂

不同身份的用户有不同的使用方式（比如普通用户和管理员）

多个用户之间可以协作

与服务器大量交互，或者使用了WebSocket

View要从多个来源获取数据

2.redux设计思想：（1）web应用是一个状态机，视图与状态是一一对应的（2）所有的状态都保存在一个对象里

3.Store （容器）

Store是保存数据的地方（容器），整个应用只能有一个Store。createStore这个函数，用来生成 Store：

import { createStore } from 'redux';
const store = createStore(fn);

上面代码中，createStore函数接受另一个函数（fn）作为参数，返回新生成的 Store 对象

4.State （数据集合）

Store包含所有数据，如果想得到某个时点的数据，就要对 Store 生成快照。这种时点的数据集合，就叫做 State。

当前时刻的 State，可以通过store.getState()拿到：

import { createStore } from 'redux';
const store = createStore(fn);
const state = store.getState()；

注意：一个 State 对应一个 View。只要 State 相同，View 就相同。你知道 State，就知道 View 是什么样，反之亦然。

5.Action （对象）

State的变化会导致View的变化，但是用户接触不到State只能接触View。所以，State的变化必须是View导致的，Action就是View发出的通知，表示State应该要发生变化了赶紧采取行动。 Action是一个对象，其中type属性是必须的,表示Action的名称：

const action = {
  type: 'ADD_TODO',
  payload: 'Learn Redux'
};

上面代码中，Action 的名称是ADD_TODO，它携带的信息是字符串Learn Redux。

可以这样理解：Action 描述当前发生的事情。改变 State 的唯一办法，就是使用 Action。它会运送数据到 Store

6. Action Creator （函数）

View 要发送多少种消息，就会有多少种 Action。如果都手写，会很麻烦。可以定义一个函数来生成 Action，这个函数就叫 Action Creator:

const ADD_TODO = '添加 TODO';

function addTodo(text) {
  return {
    type: ADD_TODO,
    text
  }
}
const action = addTodo('Learn Redux');

上面代码中，addTodo函数就是一个 Action Creator。

7.store.dispatch() （方法）

store.dispatch()是 View 发出 Action 的唯一方法:

import { createStore } from 'redux';
const store = createStore(fn);

store.dispatch({
  type: 'ADD_TODO',
  payload: 'Learn Redux'
});x');

上面代码中，store.dispatch接受一个 Action 对象作为参数，将它发送出去，也可修改为：store.dispatch(addTodo('Learn Redux'));

8.Reducer（函数）

Store收到Action后必须给出一个新的State，这样View才会变化。这种State的计算过程叫做Reducer

Reducer是一个函数，他接收Action和当前State作为参数，返回一个新的State：

const reducer = function(state,action) {
   return new_state;
}

9.store.subscribe() （方法）

store.subscribe方法设置监听函数，一旦 State 发生变化，就自动执行这个函数。只要把 View 的更新函数放入listen，就会实现 View 的自动渲染：

import { createStore } from 'redux';
const store = createStore(reducer);

store.subscribe(listener);

二、总结

1.工作流程：

（1）首先，用户发出 Action： store.dispatch(action);

（2）然后，Store 自动调用 Reducer，并且传入两个参数：当前 State 和收到的 Action。 Reducer 会返回新的 State

let nextState = todoApp(previousState, action);

（3）State 一旦有变化，Store 就会调用监听函数

// 设置监听函数
store.subscribe(listener);

（4）listener可以通过store.getState()得到当前状态。如果使用的是 React，这时可以触发重新渲染 View

       function listerner() {
       let newState = store.getState();
       component.setState(newState);   
       }

react-router路由库：

一、基本用法

Router组件本身只是一个容器，真正的路由要通过Route组件定义

import { Router, Route, hashHistory } from 'react-router';

render((
  <Router history={hashHistory}>
    <Route path="/" component={App}/>
  </Router>
), document.getElementById('app'));

上面代码中，用户访问根路由/（比如http://www.example.com/），组件APP就会加载到document.getElementById('app')。

Router组件有一个参数history，它的值hashHistory表示：路由的切换由URL的hash变化决定，即URL的#部分发生变化，举例来说，用户访问http://www.example.com/，实际会看到的是http://www.example.com/#/

Route组件定义了URL路径与组件的对应关系。可以同时使用多个Route组件：用户访问/repos（比如http://localhost:8080/#/repos）时，加载Repos组件.....

<Router history={hashHistory}>
  <Route path="/" component={App}/>
  <Route path="/repos" component={Repos}/>
  <Route path="/about" component={About}/>
</Router>