redux学习

(1) redux简介

reducer

reducer 是一个计划函数，接收旧的 state 和 action，生成新的 state

            combineReducers：多 reducer 合并成一个 reducer

            state:状态

            action：一个对象，必须包含 type 字段

store

存储器，存储所有的状态和方法（state状态 ，subscribe订阅方法，dispatch状态修改方法）

          createStore：创建 store 对象，包含 getState, dispatch, subscribe等

          dispatch：触发 action，生成新的 state

          subscribe：实现订阅功能，每次触发 dispatch 的时候，会执行订阅函数

view

视图层，控制显示

middleware

扩展 dispatch 函数，dispatch 函数中不同功能 的方法提取出来

(2)  Redux 的工作流程

1）创建Store

import { createStore } from 'redux';

const defaultState = 0;

// Action 就是 View 发出的通知，表示 State 应该要发生变化了。其中的type属性是必须的，表示 Action 的名称。其他属性可以自由设置

const action = {

  type: 'ADD',

  payload: 2

};

// Reducer 是一个函数，它接受 Action 和当前 State 作为参数，返回一个新的 State。Store 收到 Action 以后，必须给出一个新的 State，这样 View 才会发生变化。

const reducer = (state = defaultState, action) => {

  switch (action.type) {

    case 'ADD':

      return state + action.payload;

    default:

      return state;

  }

};

// createStore接受 Reducer 作为参数，生成一个新的 Store

const store = createStore(reducer);

2) 用户发出 Action

// Action 是一个对象。其中的type属性是必须的，表示 Action 的名称。其他属性可以自由设置

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

function addTodo(text) {

  return {

    type: 'ADD',

    text

  }

}

const action = addTodo(3);

// store.dispatch()是 View 发出 Action 的唯一方法，会触发 Reducer 的自动执行

store.dispatch(action);

3) Store 允许使用store.subscribe方法设置监听函数，一旦 State 发生变化，就自动执行这个函数。

//  listener可以通过store.getState()得到当前状态。只要把 View 的更新函数（对于 React 项目，就是组件的render方法或setState方法）放入listen，就会实现 View 的自动渲染。

function listerner() {

  let newState = store.getState();

  component.setState(newState);

}

store.subscribe(listener);

4) Redux 提供了一个combineReducers方法，用于 Reducer 的拆分。你只要定义各个子 Reducer 函数，然后用这个方法，将它们合成一个大的 Reducer。

import { combineReducers } from 'redux';

const chatReducer = combineReducers({

  chatLog,

  statusMessage,

  userName

})

export default chatReducer;

或者可以把所有子 Reducer 放在一个文件里面，然后统一引入。

import { combineReducers } from 'redux'

i

import * as reducers from './reducers'

const reducer = combineReducers(reducers)

5) 中间件是一个函数，对store.dispatch方法进行了改造，在发出 Action 和执行 Reducer 这两步之间，添加了其他功能。

createStore方法可以接受整个应用的初始状态作为参数，那样的话，applyMiddleware就是第三个参数了。

// applyMiddlewares是 Redux 的原生方法，作用是将所有中间件组成一个数组，依次执行。

const store = createStore(

  reducer,

  initial_state,

  applyMiddleware(thunk, promise, logger)

);

常用中间件：

redux-thunk 中间件

异步操作的第一种解决方案就是，写出一个返回函数的 Action Creator，然后使用redux-thunk中间件改造store.dispatch

import { createStore, applyMiddleware } from 'redux';

import thunk from 'redux-thunk';

import reducer from './reducers';

// 使用redux-thunk中间件，改造store.dispatch，使得后者可以接受函数作为参数。

const store = createStore(

  reducer,

  applyMiddleware(thunk)

);

// fetchPosts是一个Action Creator（动作生成器），返回一个函数。这个函数执行后，先发出一个Action（requestPosts(postTitle)），然后进行异步操作。拿到结果后，先将结果转成 JSON 格式，然后再发出一个 Action（ receivePosts(postTitle, json)）。

const fetchPosts = postTitle => (dispatch, getState) => {

  dispatch(requestPosts(postTitle));

  return fetch(`/some/API/${postTitle}.json`)

    .then(response => response.json())

    .then(json => dispatch(receivePosts(postTitle, json)));

  };

};

store.dispatch(fetchPosts('reactjs'));

redux-promise 中间件

另一种异步操作的解决方案，就是让 Action Creator 返回一个 Promise 对象。

import { createStore, applyMiddleware } from 'redux';

import promiseMiddleware from 'redux-promise';

import reducer from './reducers';

//promiseMiddleware中间件使得store.dispatch方法可以接受 Promise 对象作为参数。

const store = createStore(

  reducer,

  applyMiddleware(promiseMiddleware)

);

//Action Creator 有两种写法。写法一，返回值是一个 Promise 对象。

const fetchPosts =

  (dispatch, postTitle) => new Promise(function (resolve, reject) {

    dispatch(requestPosts(postTitle));

    return fetch(`/some/API/${postTitle}.json`)

      .then(response => {

        type: 'FETCH_POSTS',

        payload: response.json()

      });

});

//写法二， Action 对象的payload属性是一个 Promise 对象。这需要从redux-actions模块引入createAction方法，并且写法也要变成下面这样。

import { createAction } from 'redux-actions';

const fetchPosts = createAction(

      'FETCH_POSTS',

      fetch(`/some/API/${postTitle}.json`)

        .then(response => response.json())

    )

(3) React-Redux

1）UI组件与容器组件

UI 组件负责 UI 的呈现，容器组件负责管理数据和逻辑。

UI 组件：

只负责 UI 的呈现，不带有任何业务逻辑

没有状态（即不使用this.state这个变量）

所有数据都由参数（this.props）提供

不使用任何 Redux 的 API

容器组件：

负责管理数据和业务逻辑，不负责 UI 的呈现

带有内部状态

使用 Redux 的 API

React-Redux 规定，所有的 UI 组件都由用户提供，容器组件则是由 React-Redux 自动生成。

2）connect()

React-Redux 提供connect方法，用于从 UI 组件生成容器组件。connect的意思，就是将这两种组件连起来。connect方法的完整 API 如下：

import { connect } from 'react-redux'

const VisibleTodoList = connect(

  mapStateToProps,

  mapDispatchToProps

)(TodoList)

上面代码中，connect方法接受两个参数：mapStateToProps和mapDispatchToProps。它们定义了 UI 组件的业务逻辑。前者负责输入逻辑，即将state映射到 UI 组件的参数（props），后者负责输出逻辑，即将用户对 UI 组件的操作映射成 Action。

mapStateToProps()

mapStateToProps是一个函数。它的作用就是像它的名字那样，建立一个从（外部的）state对象到（UI 组件的）props对象的映射关系。

// mapStateToProps是一个函数，它接受state作为参数，返回一个对象。这个对象有todos属性和visibilityFilter属性，代表 UI 组件的同名参数

const mapStateToProps = (state) => {

  return {

    todos: getVisibleTodos(state.todos, state.visibilityFilter)

  }

}

// mapStateToProps的第一个参数总是state对象，还可以使用第二个参数，代表容器组件的props对象。

const mapStateToProps = (state, ownProps) => {

  return {

    active: ownProps.filter === state.visibilityFilter

  }

}

// getVisibleTodos从state算出 todos 的值

const getVisibleTodos = (todos, filter) => {

  switch (filter) {

    case 'SHOW_ALL':

      return todos

    case 'SHOW_COMPLETED':

      return todos.filter(t => t.completed)

    case 'SHOW_ACTIVE':

      return todos.filter(t => !t.completed)

    default:

      throw new Error('Unknown filter: ' + filter)

  }

}

mapDispatchToProps()

mapDispatchToProps是connect函数的第二个参数，用来建立 UI 组件的参数到store.dispatch方法的映射。也就是说，它定义了哪些用户的操作应该当作 Action，传给 Store。它可以是一个函数，也可以是一个对象。

// 如果mapDispatchToProps是一个函数，会得到dispatch和ownProps（容器组件的props对象）两个参数。mapDispatchToProps作为函数，应该返回一个对象，该对象的每个键值对都是一个映射，定义了 UI 组件的参数怎样发出 Action。

const mapDispatchToProps = (

  dispatch,

  ownProps

) => {

  return {

    onClick: () => {

      dispatch({

        type: 'SET_VISIBILITY_FILTER',

        filter: ownProps.filter

      });

    }

  };

}

// 如果mapDispatchToProps是一个对象，它的每个键名也是对应 UI 组件的同名参数，键值应该是一个函数，会被当作 Action creator ，返回的 Action 会由 Redux 自动发出。

const mapDispatchToProps = {

  onClick: (filter) => {

    type: 'SET_VISIBILITY_FILTER',

    filter: filter

  };

}

3）<Provider> 组件

React-Redux 提供Provider组件，可以让容器组件拿到state。

import { Provider } from 'react-redux'

i

import { createStore } from 'redux'

i

import todoApp from './reducers'

i

import App from './components/App'

let store = createStore(todoApp);

// Provider在根组件外面包了一层，这样一来，App的所有子组件就默认都可以拿到state了。

render(

  <Provider store={store}>

    <App />

  </Provider>,

  document.getElementById('root')

)

// store放在了上下文对象context上面。调用时，子组件可以从context拿到store

class VisibleTodoList extends Component {

  componentDidMount() {

    const { store } = this.context;

    this.unsubscribe = store.subscribe(() =>

      this.forceUpdate()

    );

  }

  render() {

    const props = this.props;

    const { store } = this.context;

    const state = store.getState();

    // ...

  }

}

VisibleTodoList.contextTypes = {

  store: React.PropTypes.object

}