Redux, redux-saga

从数据到界面响应流程
用户在界面上操作，发起action，action在reducer中改变store上的数据，或者在saga中调接口改变数据，促使页面刷新

1.ManagementConsole项目执行npm run dev

image.png

解决：先执行npm run build-libs-dev

交互流程:

① Index.tsx -> action ->reducer ->store(app.tsx)

② Index.tsx -> action ->saga -> reducer ->store(app.tsx)

Reducer :(state,action)=>newstate

（以作业中心 -> 布置作业 ->个人草稿初始化界面数据的获取为例）页面加载出来触发数据的获取

③ 首先在个人草稿对应的页面组件中触发action的地方

image.png

④ 开始找action

image.png

⑤ Saga

image.png

⑥ 返回到action

image.png

⑦ 进入reducer（在此返回saga请求所得数据给页面组件）

image.png

以作业中心 -> 布置作业 ->个人草稿删除某个记录为例

① 页面触发action

image.png

② action

image.png

③ saga

image.png

④ action

image.png

⑤ reducer

image.png

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

image.png

注意：对于其中的editDate: editDateSelector(state),有两种写法(冒号左边的editDate代表UI组件同名的参数，右边的editDateSelector是一个函数可以从state算出editDate的值)：

① editDate: editDateSelector(state)，通过selector

image.png

② 跳过selector

editDate: state.getEditDataReducer.getEditData,

image.png

注意：拿getRequestEidtData键值对进行说明

冒号左边的是UI组件对应的同名参数，右边的函数定义了UI组件的参数怎样发出Action

额外理解

1．在入口文件app.tsx中引入了react-hot-loader中的AppContainer组件，这个组件下的所有子组件都会在发生变化时触发热更新

image.png

2.是一个处理reloading的组件，它同样会处理错误。Root组件必须嵌套在AppContainer里面作为子组件，当在生产模式的时候，AppContainer会自动禁用，只是简单的返回子组件

Store

Store 就是保存数据的地方，可以把它看成一个容器,整个应用只能有一个 Store。Redux 提供createStore这个函数来生成 Store。

image.png

上面代码中，createStore函数接受另一个函数作为参数，返回新生成的 Store 对象。在生成 Store 的时候，将 Reducer 传入createStore方法dispatch方法会触发 Reducer 的自动执行

const store = createStore(
    createReducer(undefined),
    composeEnhancers( applyMiddleware(sagaMiddleware, reduxRouterMiddleware))
);

State

Store对象包含所有数据。如果想得到某个时点的数据，就要对 Store 生成快照。这种时点的数据集合，就叫做 State。当前时刻的 State，可以通过store.getState()拿到。

Action

State 的变化，会导致 View 的变化。但是，用户接触不到 State，只能接触到 View。所以，State 的变化必须是 View 导致的。Action 就是 View 发出的通知，表示 State 应该要发生变化了。改变 State 的唯一办法，就是使用 Action。它会运送数据到 Store。

Dispatch

dispatch()是 View 发出 Action 的唯一方法，dispatch接受一个 Action 对象作为参数，将它发送出去

Reducer

Store 收到 Action 以后，必须给出一个新的 State，这样 View 才会发生变化。这种 State 的计算过程（逻辑处理）就叫做 Reducer。Reducer 是一个函数，它接受 Action 和当前 State 作为参数，返回一个新的 State。

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

[DRAFT_INIT_SUCCEEDED]: (state, action: Action) => {
    return Object.assign({},state,{
        initDraftData: action.payload
    });
},

总reducer

image.png

combineReducers()做的就是产生一个整体的 Reducer 函数。该函数根据 State 的 key 去执行相应的子 Reducer，并将返回结果合并成一个大的 State 对象

redux-thunk 中间件

Action 是由store.dispatch方法发送的。而store.dispatch方法正常情况下，参数只能是对象，不能是函数。这时，就要使用中间件redux-thunk。

import reducer from './reducers';

// Note: this API requires redux@>=3.1.0
const store = createStore(
  reducer,
  applyMiddleware(thunk)
);

上面代码使用redux-thunk中间件，改造store.dispatch，使得store.dispatch可以接受函数作为参数。

因此，异步操作的第一种解决方案就是，写出一个返回函数的 Action Creator，然后使用redux-thunk中间件改造store.dispatch。(在线教育使用的就是该方案)

redux-promise 中间件

既然 Action Creator 可以返回函数，当然也可以返回其他值。另一种异步操作的解决方案，就是让 Action Creator 返回一个 Promise 对象。

这就需要使用redux-promise中间件。

import { createStore, applyMiddleware } from 'redux';
import promiseMiddleware from 'redux-promise';
import reducer from './reducers';

const store = createStore(
  reducer,
  applyMiddleware(promiseMiddleware)
);

这个中间件使得store.dispatch方法可以接受 Promise 对象作为参数。这时，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';

class AsyncApp extends Component {
  componentDidMount() {
    const { dispatch, selectedPost } = this.props
    // 发出同步 Action
    dispatch(requestPosts(selectedPost));
    // 发出异步 Action
    dispatch(createAction(
      'FETCH_POSTS', 
      fetch(`/some/API/${postTitle}.json`)
        .then(response => response.json())
    ));
  }

上面代码中，第二个dispatch方法发出的是异步 Action，只有等到操作结束，这个 Action 才会实际发出。注意，createAction的第二个参数必须是一个 Promise 对象。

React-Redux，

React-Redux 将所有组件分成两大类：UI 组件（presentational component）和容器组件（container component）。UI 组件负责 UI 的呈现，容器组件负责管理数据和逻辑。

如果一个组件既有 UI 又有业务逻辑，那怎么办？回答是，将它拆分成下面的结构：外面是一个容器组件，里面包了一个UI 组件。前者负责与外部的通信，将数据传给后者，由后者渲染出视图。

React-Redux 规定，所有的 UI 组件都由用户提供，容器组件则是由 React-Redux 自动生成。也就是说，用户负责视觉层，状态管理则是全部交给它。

UI 组件

UI 组件有以下几个特征

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

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

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

§ 不使用任何 Redux 的 API

因为不含有状态，UI 组件又称为"纯组件"，即它纯函数一样，纯粹由参数决定它的值。

容器组件

容器组件的特征恰恰相反。

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

§ 带有内部状态

§ 使用 Redux 的 API

connect()

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

import { connect } from 'react-redux'
const VisibleTodoList = connect()(TodoList);

上面代码中，TodoList是 UI 组件，VisibleTodoList就是由 React-Redux 通过connect方法自动生成的容器组件。

但是，因为没有定义业务逻辑，上面这个容器组件毫无意义，只是 UI 组件的一个单纯的包装层。为了定义业务逻辑，需要给出下面两方面的信息：

（1）输入逻辑：外部的数据（即state对象）如何转换为 UI 组件的参数

（2）输出逻辑：用户发出的动作如何变为 Action 对象，从 UI 组件传出去

因此，connect方法的完整 API 如下。

import { connect } from 'react-redux'

const VisibleTodoList = connect(
  mapStateToProps,      //connect第一个参数，是一个函数 执行后返回一个对象
  mapDispatchToProps  //第二个参数，可以是一个函数或对象执行后返回一个对象
)(TodoList)

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

mapStateToProps()

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

作为函数，mapStateToProps执行后应该返回一个对象，里面的每一个键值对就是一个映射。请看下面的例子。

const mapStateToProps = (state) => {
  return {
    todos: getVisibleTodos(state.todos, state.visibilityFilter)
  }
}

上面代码中，mapStateToProps是一个函数，它接受state作为参数，返回一个对象。这个对象有一个todos属性，代表 UI 组件的同名参数，后面的getVisibleTodos也是一个函数，可以从state算出 todos 的值。

下面就是getVisibleTodos的一个例子，用来算出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)
  }
}

mapStateToProps会订阅 Store，每当state更新的时候，就会自动执行，重新计算 UI 组件的参数，从而触发 UI 组件的重新渲染。

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

// 容器组件的代码
//    
//      All
//    

const mapStateToProps = (state, ownProps) => {
  return {
    active: ownProps.filter === state.visibilityFilter
  }
}

使用ownProps作为参数后，如果容器组件的参数发生变化，也会引发 UI 组件重新渲染。

connect方法可以省略mapStateToProps参数，那样的话，UI 组件就不会订阅Store，就是说 Store 的更新不会引起 UI 组件的更新

mapDispatchToProps()

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

如果mapDispatchToProps是一个函数，会得到dispatch和ownProps（容器组件的props对象）两个参数。

const mapDispatchToProps = (
  dispatch,
  ownProps
) => {
  return {
    onClick: () => {
      dispatch({
        type: 'SET_VISIBILITY_FILTER',
        filter: ownProps.filter
      });
    }
  };
}

从上面代码可以看到，mapDispatchToProps作为函数应该返回一个对象，该对象的每个键值对都是一个映射，定义了UI组件的参数怎样发出Action

如果mapDispatchToProps是一个对象，它的每个键名也是对应 UI 组件的同名参数，键值应该是一个函数，会被当作 Action creator ，返回的 Action 会由 Redux 自动发出。举例来说，上面的mapDispatchToProps写成对象就是下面这样

const mapDispatchToProps = {
  onClick: (filter) => {
    type: 'SET_VISIBILITY_FILTER',
    filter: filter
  };
}

组件

Connect方法生成容器组件后，需要让容器组件拿到state对象才能生成UI组件的参数

一种解决方法是将state对象作为参数传入容器组件，但是这样做比较麻烦，尤其是容器组件可能在很深的层级，一级级将state传下去将很麻烦

React-Redux提供Provider组件，可以让容器拿到state (可以结合TeacherClient项目理解)

import { Provider } from 'react-redux'
import { createStore } from 'redux'
import todoApp from './reducers'
import App from './components/App'

let store = createStore(todoApp);

render(
  
    
  ,
  document.getElementById('root')
)

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

关于调用后端接口

接口的调用都是需要access_token的，财联邦的是在接口url后拼access_token和sessionId，芝士网是传authorization

有关Token（authorization—--接口调用需要的参数）

（以CourseManagement工程为例）