redux精读

た入场券 2023-05-31 15:25 6阅读 0赞

**Redux**  
三大原则：  
（1）单一数据元。  
（2）State 是只读的。  
(3)使用纯函数来执行修改

**Store**  
Store是一个容器，用来保存数据。**整个应用只能有一个Store。**  
Redux提供createStore这个函数来生成Store。

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

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

**State**  
Store对象包含所有数据，如果想得到某个时点的数据

**Action**  
用户触发view，view发出action， Action 就是 View 发出的通知，表示 State 应该要发生变化了。

**Action Creator**  
定义一个函数来生成 Action，这个函数就叫 Action Creator。

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

**Reducer**  
Store 收到 Action 以后，必须给出一个新的 State，这样 View 才会发生变化。这种 State 的计算过程就叫做 Reducer。  
Reducer 是一个函数，它接受 Action 和当前 State 作为参数，返回一个新的 State。  
store.dispatch方法会触发 Reducer 的自动执行。为此，Store 需要知道 Reducer 函数，做法就是在生成 Store 的时候，将 Reducer 传入createStore方法。

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

**combineReducer函数**

import { combineReducers } from 'redux';
    const chatReducer = combineReducers({
      chatLog,
      statusMessage,
      userName
    })
    export default todoApp;

Reducer 函数被拆成了三个小函数，每一个负责生成对应的属性。combineReducers方法将三个子 Reducer 合并成一个大的函数，以便于逻辑代码维护。

**UI组件和容器组件**

import { connect } from 'react-redux'
    const VisibleTodoList = connect(
      mapStateToProps,
      mapDispatchToProps
    )(TodoList)

TodoList是 UI 组件，VisibleTodoList就是由 React-Redux 通过connect方法自动生成的容器组件。  
mapStateToProps和mapDispatchToProps。它们定义了 UI 组件的业务逻辑。前者负责输入逻辑，即将state映射到 UI 组件的参数（props），后者负责输出逻辑，即将用户对 UI 组件的操作映射成 Action。  
**mapStateToProps会订阅 Store，每当state更新的时候，就会自动执行，重新计算 UI 组件的参数，从而触发 UI 组件的重新渲染**

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

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

**Provider 组件**  
Provider组件，可以让容器组件拿到state，它的原理是React组件的context属性

import { Provider } from 'react-redux'
    import { createStore } from 'redux'
    import todoApp from './reducers'
    import App from './components/App'
    let store = createStore(todoApp);
    render(
      <Provider store={store}>
        <App />
      </Provider>,
      document.getElementById('root')
    )