React个人入门总结《六》

简介

这次要总结的是对 store 和 reducer 的拓展，比如发送异步的 action 操作，还有一个就是对多个 reducer 的管理。

首先来总结一下 react-redux 的使用：

1. 下载 react-redux 和 redux 到项目中。

2. 引入 createStore 并且创建 store 。

<!-- reducer -->
function handleUser(state = [], action) {
  switch (action.type) {
    case 'ADD_USER':
      state.push(action.user)
      return [...state];
    case 'DELETE_USER':
      state.splice(action.payload, 1);
      return [...state];
    default:
      return state
  }
}
export { handleUser }; 

<!-- store -->
import { createStore } from 'redux';
import { handleUser } from '../Reducer/handleUser';

const store = createStore(handleUser);
export { store };
复制代码

3. 在 index.js 引入 store ，并且引入 Provider 并且将 store 传递给它。

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { store } from './Redux/Store/store';
import * as serviceWorker from './serviceWorker';
import './assets/_reset.scss';

// 引入页面
import { UserContainer } from './Pages/UserContainer';

ReactDOM.render(
  <Provider store={ store }>
    <UserContainer />
  </Provider>,
  document.getElementById('root')
)
复制代码

4. 在 UI组件 中使用 connect 获取当前状态和使用 dispatch 发送 action 。

<!-- action -->
const addUser = (user) => ({
  type: 'ADD_USER',
  user: user
})
const deleteUser = (index) => ({
  type: 'DELETE_USER',
  index: index
})
export { addUser, deleteUser };


<!-- pages -->
import { addUser, deleteUser } from '../Redux/Action/addUserData';
const mapStateToProps = (state) => {
  return {
    userList: userList
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    addUserData: (user) => {
      return dispatch(addUser(user))
    },
    deleteUserData: (index) => {
      return dispatch(deleteUser(index))
    }
  }
}

UserContainer = connect(mapStateToProps, mapDispatchToProps)(UserContainer);
复制代码

以上就是 react-redux 的使用，下面继续拓展其他使用方式。

---

combineReducers

combineReducers 是 redux 提供的一个方法，调用这个方法并且传入多个 reducer ，然后对这些 reducer 进行管理：

import { combineReducers } from 'redux';
import { handleUser } from './handleUser';
<!-- 写法一 -->
const chatReducer = combineReducers({
  userList: handleUser,
  <!-- ...这里可以写更多 reducer -->
})

<!-- 写法二 -->
const chatReducer = combineReducers({
  handleUser,
  <!-- ...这里可以写更多 reducer -->
})

export { chatReducer };
复制代码

上面的 combineReducers 传入的对象有两个写法，但是每个写法最终呈现的名字必须要与 state 一样：

const mapStateToProps = (state) => {
  return {
    <!-- 这时 state 返回的是一个对象，里面返回各个 reducer 返回的 state -->
    userList: state.userList
  }
}
复制代码

还有一点就是 store 设置默认值的问题。

<!-- 使用 combineReducers 之前-->
const store = createStore(
  handleUser,
  state
)

<!-- 使用 combineReducers 之后-->
const store = createStore(
  chatReducer,
  { userList: state }   // 这里参数必须是个对象，而且对象里面的键要和 combineReducers 设置的相同。
)
复制代码

store 可以接受三个参数，第一个参数是 reducer ,第二个参数代表状态默认值，用于覆盖 reducer 的默认状态。

store 的第三个参数

目前的 store 并不具备处理异步 action 的能力，我们可以使用 中间件 来实现这个操作。

applyMiddleware 是 store 的第三个参数，它是一个函数，用来拓展 store ，这个方法来源于 redux 。

• logger

  import { createLogger } from 'redux-logger';
  const logger = createLogger();
  
  const store = createStore( chatReducer, { userList: defaultUserList }, applyMiddleware(logger));
复制代码

logger 可以在发送 action 时打印状态的变化以及 action 的信息：

• redux-thunk

  import thunk from 'redux-thunk';
  import { createLogger } from 'redux-logger';
  const logger = createLogger();
  const store = createStore(
    chatReducer,
    { userList: defaultUserList },
    applyMiddleware(thunk, logger)
  );
复制代码

正常情况下，dispatch 传递的参数只能是对象：

addUserData: (user) => {
  return dispatch({
    type: 'ADD_USER',
    payload: user
  })
}
复制代码

使用 redux-thunk 让 dispatch 接受一个函数，让他能够进行异步操作：

addUserData: (user) => {
  return dispatch((dispatch, getState)=> {
    setTimeout(()=> {
      dispatch(addUser(user))
    }, 2000)
  })
}
复制代码

传递一个函数之后，这个函数可以接受两个参数，一个是 dispatch ，另一个是 getState ,然后在里面进行异步操作，我这里设置了 2秒 然后添加了一个用户，点击之后，过了 2秒 我的用户才会被添加进去，而页面也是等到 2秒 后重新渲染。

这种异步思路就是使用 Action Creator 返回一个函数，然后使用 redux-thunk 让 dispatch 能够接受一个函数作为参数。

• redux-promise

  import thunk from 'redux-thunk';
  import { createLogger } from 'redux-logger';
  import promiseMiddleware from 'redux-promise';
  const logger = createLogger();
  const store = createStore(
    chatReducer,
    { userList: defaultUserList }, 
    applyMiddleware(thunk, promiseMiddleware, logger) // 按照严格的循序
  );
复制代码

上一种方法是使用 Action Creator 返回函数来操作异步，使用 redux-promise 可以让它返回一个 promise 对象，可以使用 then 来实现后面的操作。

deleteUserData: (index) => {
  return dispatch(new Promise((resolve, reject)=> {
    setTimeout(()=> {
      dispatch(deleteUser(index))
    }, 2000)
  }))
}
复制代码

使用 redux-promise 让它能够返回一个 使用 promise ，接着我们调用 使用 deleteUserData 函数时就可以执行 then 的操作。

总结

以上三个中间件都是对 store 的拓展，使用 applyMiddleware 并且分别传入三个 中间件 ，传入时必须要遵循顺序，否则会出问题：

applyMiddleware(thunk, promiseMiddleware, logger)
复制代码