React全家桶-Redux原理实现

29.9React课程

第04节：react全家桶

(第4节：react全家桶&)

第4节：react全家桶&

redux核心概念工作流程

store存储状态，view通过dispatch派发一个动作，由action creators接收，stroe不会直接根据action修改状态，会通过reducers来更新store的状态，view与store之间有subscribe，当stroe状态发生变更view也发生了变更。

import { createStore, applyMiddleware } from "redux";

import logger from "redux-logger";
import thunk from "redux-thunk";
import { counterReducer } from "./counterReducer";

//1.创建store
//2.创建reducer

const store = createStore(counterReducer, applyMiddleware(logger, thunk));

export default store;

不会对仓库中的state直接操作，返回一个新的state

store.getState获取store中的状态

用户通过dispatch派发一个动作action.type

当属性和状态state发生变化要重新执行render渲染view，store.subsribe当store中state发生了改变让组件强制更新，不想vue中的响应式。

import React, { Component } from "react";
import store from "./store";

//redux 需要 render组件
class ReduxTest extends Component {
  //   componentDidMount() {
  //     store.subscribe(() => {
  //       this.forceUpdate();
  //     });
  //   }

  render() {
    return (
      

        {/* 获取store里面的状态 */}
         {
            store.dispatch({ type: "add" });
          }}
        >
          +
        
        redux测试{store.getState()}
         {
            store.dispatch({ type: "minus" });
          }}
        >
          -
        
      
    );
  }
}

export default ReduxTest;

App.js

import React from "react";
import ReduxTest from "./ReduxTest";
import MyReduxTest from "./MyReduxTest";
import ReactReduxTest from "./ReactReduxTest";

function App() {
  return (
    

       redux
      {/*  */}
      
      {/*  */}
    
  );
}

export default App;

react-redux

通过connect来连接components把state和dispatch绑定到props属性上。

provider全局上下文，connect接收两个参数，提供state和dispatch

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import store from "./store";
import { Provider } from "react-redux";

// const render = () => {
//   ReactDOM.render(, document.getElementById("root"));
// };
// render();
// store.subscribe(render);
ReactDOM.render(
  
    
  ,
  document.getElementById("root")
);

mapStateToProps中的state是仓库中的state

通过this.props.counter代替store.getState()

import React, { Component } from "react";
//提取connect
//1.把state,dispatch映射到属性
//2.状态变更 帮助我们render
import { connect } from "react-redux";

class ReactReduxTest extends Component {
  render() {
    return (
      

        {/* 获取store里面的状态 */}
        +
        redux测试{this.props.counter}
        -

        +++
      
    );
  }
}

//把状态映射到props
function mapStateToProps(state) {
  return {
    counter: state
  };
}
//把dispatch映射到props
function mapDispatchToProps(dispatch) {
  return {
    add: () => dispatch({ type: "add" }),
    minus: () => dispatch({ type: "minus" }),
    asycnAdd: () =>
      dispatch(function(dispatch, getState) {
        setTimeout(function() {
          //拿到了数据 data:{}
          // let data = {};

          dispatch({ type: "asyncAdd" });
        }, 3000);
      })
  };
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(ReactReduxTest);

(异步&)

异步&

import { createStore, applyMiddleware } from "redux";

import logger from "redux-logger";
import thunk from "redux-thunk";
import { counterReducer } from "./counterReducer";

//1.创建store
//2.创建reducer

const store = createStore(counterReducer, applyMiddleware(logger, thunk));

export default store;

返回一个对象，把data传递给reducers，reducers直接可以通过action.data获取传递的值

支持中间件的机制

//把dispatch映射到props
function mapDispatchToProps(dispatch) {
  return {
    add: () => dispatch({ type: "add" }),
    minus: () => dispatch({ type: "minus" }),
    asycnAdd: () =>
      dispatch(function(dispatch, getState) {
        setTimeout(function() {
          //拿到了数据 data:{}
          // let data = {};

          dispatch({ type: "asyncAdd" });
        }, 3000);
      })
  };
}

可以拆分为多个reducer，export直接导出

counterReducer.js

抽离reducers

export const counterReducer = function(state = 0, action) {
  console.log(action);
  switch (action.type) {
    case "add":
      return state + 1;
    case "minus":
      return state - 1;
    case "asyncAdd":
      return state + 10;
    default:
      return state;
  }
};

import { createStore, applyMiddleware } from "redux";

import logger from "redux-logger";
import thunk from "redux-thunk";
import { counterReducer } from "./counterReducer";

//1.创建store
//2.创建reducer

const store = createStore(counterReducer, applyMiddleware(logger, thunk));

export default store;

dispatch也可以抽离出来