React项目引入Redux

cnpm i redux --save

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

// 新建Store，并且以组件属性的形式传入组件里：
const store = createStore(counter)

function render() {
  ReactDOM.render(
    <React.StrictMode>
      <App 
        store={store} 
        addGun={addGun}
        removeGun={removeGun}
      />
    </React.StrictMode>,
    document.getElementById(‘root‘)
  );
}
render()

// 用subscribe订阅render函数，当状态变化时render会重新执行，重新渲染整个页面：
store.subscribe(render)

import React from ‘react‘

class App extends React.Component {
  // constructor(props) {
  //   super(props)
  // }
  render() {
    // 通过属性获取store以及addGun、removeGun这两个操作函数，再通过store获取初始状态和dispatch方法：
    const store = this.props.store
    const num = store.getState()
    const addGun = this.props.addGun
    const removeGun = this.props.removeGun
    return (
      <div>
        <h1>现在有机枪{num}把</h1>
        <button onClick={() => store.dispatch(addGun())}>申请武器</button>
        <button onClick={() => store.dispatch(removeGun())}>上交武器</button>
      </div>
    )
  }
}

export default App

// 定义常量：
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，专门创建action：
export function addGun() {
  return {type: ADD_GUN}
}
export function removeGun() {
  return {type: REMOVE_GUN}
}

// 只要提交action，reducer就会执行，reducer会获取现在的状态和action，action就是{type: ADD_GUN}或{type: REMOVE_GUN}，然后判断type，处理完返回新的状态，当状态变化时，用subscribe订阅drender函数会重新执行，重新渲染整个页面：