使用 Redux

简单使用

import { createStore } from "redux";

// 1. 新建 store
// 通过reducer建立
// 根据老的 state 和 action 生成新的 state
function counter(state = 0, action) {
  switch (action.type) {
    case "加机关枪":
      return state + 1;
    case "减机关枪":
      return state - 1;
    default:
      return 10;
  }
}

// 新建 store
const store = createStore(counter);

const init = store.getState();
console.log(init);

store.dispatch({ type: "加机关枪" });
console.log(store.getState());
store.dispatch({ type: "加机关枪" });
console.log(store.getState());
store.dispatch({ type: "减机关枪" });
console.log(store.getState());

---

优化

App.js

import React from "react";

class App extends React.Component {
  // constructor(props) {
  //   super(props)
  // }
  render() {
    const store = this.props.store;
    const num = store.getState();
    const addGun = this.props.addGun;
    const removeGun = this.props.removeGun;
    return (
      

        

          现在有机枪
          {num}把
        
         store.dispatch(addGun())}>申请武器
         store.dispatch(removeGun())}>上交武器
      
    );
  }
}

export default App;

index.js

import React from "react";
import ReactDom from "react-dom";
import { createStore } from "redux";
import App from "./App";
import { counter, addGun, removeGun } from "./index.redux";

const store = createStore(counter);

function render() {
  ReactDom.render(
    ,
    document.getElementById("root")
  );
}
render();

store.subscribe(render);

index.redux.js

const ADD_GUN = "加机关枪";
const REMOVE_GUN = "减机关枪";

// reducer
export function counter(state = 0, action) {
  switch (action.type) {
    case ADD_GUN:
      return state + 1;
    case REMOVE_GUN:
      return state - 1;
    default:
      return 10;
  }
}

// action creator
export function addGun() {
  return { type: ADD_GUN };
}

export function removeGun() {
  return { type: REMOVE_GUN };
}

---

更进一步, 让 Redux 可以处理异步

• Redux 处理异步, 需要 redux-thunk 插件
• npm i redux-devtools-extension 开启
• 使用 react-redux 优雅链接 react 和 redux

Redux 默认只处理同步, 异步任务需要 react-thunk 中间件

• npm i redux-thunk
• 使用 applyMiddleware 开启 thunk 中间件
• Action 可以返回函数, 使用 dispatch 提交 action

App.js

  render() {
    const store = this.props.store
    const num = store.getState()
    const addGun = this.props.addGun
    const removeGun = this.props.removeGun
    const addGunAsync = this.props.addGunAsync
    return (
      

        
现在有机枪{num}把
         store.dispatch(addGun())}>申请武器
         store.dispatch(removeGun())}>上交武器
         store.dispatch(addGunAsync())}>拖两天再给
      
    )
  }

index.js

import React from "react";
import ReactDom from "react-dom";
import { createStore, applyMiddleware } from "redux";
import thunk from "redux-thunk";
import App from "./App";
import { counter, addGun, removeGun, addGunAsync } from "./index.redux";

const store = createStore(counter, applyMiddleware(thunk));

function render() {
  ReactDom.render(
    ,
    document.getElementById("root")
  );
}

index.redux.js

export function addGunAsync() {
  return dispatch => {
    setTimeout(() => {
      dispatch(() => {
        dispatch(addGun());
      });
    }, 2000);
  };
}

---

调试工具

• Chrome 搜索 redux 安装
  • 新建 store 的时候判断 window.devToolsExtension
  • 使用 compose 结合 thunk 和 window.devToolsExtension
  • 调试窗的 redux 选项卡, 实时看到 state

// index.js
import React from "react";
import ReactDom from "react-dom";
import { createStore, applyMiddleware, compose } from "redux";
import thunk from "redux-thunk";
import App from "./App";
import { counter, addGun, removeGun, addGunAsync } from "./index.redux";

const store = createStore(
  counter,
  compose(
    applyMiddleware(thunk),
    window.devToolsExtension ? window.devToolsExtension() : () => {}
  )
);

使用 React-redux

• npm i react-redux
• 忘记 subscribe, 记住 reducer, action 和 dispatch 即可
• React-redux 提供 Provider 和 connect 连个接口来链接

React-redux 具体使用

• Provider 组件在应用最外层, 传入 store 即可, 只用一次
• Connect 负责从外部获取组件需要的参数
• Connect 可以用装饰器的方式来写

// index.js
import React from "react";
import ReactDom from "react-dom";
import { createStore, applyMiddleware, compose } from "redux";
import thunk from "redux-thunk";
import { Provider } from "react-redux";
import App from "./App";
import { counter } from "./index.redux";

const store = createStore(
  counter,
  compose(
    applyMiddleware(thunk),
    window.devToolsExtension ? window.devToolsExtension() : () => {}
  )
);

ReactDom.render(
  
    
  ,
  document.getElementById("root")
);

// App.js
import React from "react";
import { connect } from "react-redux";
import { addGun, removeGun, addGunAsync } from "./index.redux";

class App extends React.Component {
  render() {
    return (
      

        

          现在有机枪
          {this.props.num}把
        
        申请武器
        上交武器
        拖两天再给
      
    );
  }
}
const mapStatetoProps = state => {
  return { num: state };
};
const actionCreators = { addGun, removeGun, addGunAsync };

App = connect(
  mapStatetoProps,
  actionCreators
)(App);
export default App;

使用装饰器优化 Connect 代码

• npm i -D babel-plugin-transform-decorators-legacy 安装插件
• package.json 里 babel 加上 plugins 配置

"babel": {
    "presets": [
      "react-app"
    ],
    "plugins": ["babel-plugin-transform-decorators-legacy"]
  }

// App.js
import React from "react";
import { connect } from "react-redux";
import { addGun, removeGun, addGunAsync } from "./index.redux";

@connect(
  state => ({ num: state }),
  { addGun, removeGun, addGunAsync }
)
class App extends React.Component {
  render() {
    const num = this.props.num;
    const addGun = this.props.addGun;
    const removeGun = this.props.removeGun;
    const addGunAsync = this.props.addGunAsync;
    return (
      

        

          现在有机枪
          {num}把
        
        申请武器
        上交武器
        拖两天再给
      
    );
  }
}

export default App;

---

验证属性

import PropTypes from 'prop-types';

class Greeting extends React.Component {
  render() {
    return (
      
Hello, {this.props.name}
    );
  }
}

Greeting.propTypes = {
  name: PropTypes.string
};