react-7-redux

redux

// 安装
npm install react-redux redux redux-logger redux-promise redux-thunk

使用redux

1. index.js

// 引入redux
improt {
    createStort
}
from 'redux'

// 创建公共容器 reducer是管理员
const initialState = {
  title: '好好学习，天天向上',
  supNum: 0,
  oppNum: 0
}
function reducer(state = initialState, action) {
    /*  state: 原始容器中的状态 (初始容器没有状态，我们给其赋值默认指 {})
     *  action: 组件内基于dispatch派发的任务对象（要求对象中必须有type属性，因为我们需要基于type判断派发任务，从而修改不同的公共状态信息）
     */

    // 为了防止state和原始容器状态共用同一个堆内存，我们需要把器深克隆
    state = JSON.parse(JSON.stringify(state))
    switch(action.type){
      case 'SUPPORT': // 匹配行为标识
        state.supNum += action.payload
      break;
      case 'SUPPORT': // 匹配行为标识
        state.supNum += action.payload
      break;
    }
    return state; // => return 的是啥，相当于把原始容器中的状态修改为啥
}

const store = createStort(reducer)

// 笨方法使用redux
ReactDOM.render(
  <>
  <App store={store} />
  </>,
  document.getElementById('root')
);

2.App.js 获取store公共信息(笨方法)

import react from 'react'

class App extends react.Component{
  render() {
    // 基于stort.getState()获取公共状态信息
    const store = this.props.state
    let {title, supNum, oppNum} = store.getState()

    return (
      <ul>
        <li>{title}</li>
        <li>{supNum}</li>
        <li>{oppNum}</li>
      </ul>
    )
  }
  // 把当前组件重新渲染的方法加到store的事件队列中，当容器中的状态改变时，会通知事件执行。从而达到状态更新，=> 所用组件也会重新渲染
  componentDidMounte() {
    const stort = this.props.state;
    const unsubscribe = stort.subscribe(){
      // 强制渲染组件
      this.forceUpddate()
    }
    // => 执行stort.subscribe 返回unsubscribe这个函数， 函数执行把之前的事件池内追加的这个方法从事件池内移除掉
    // unsubscribe()
  }
}
export default App;

2.1.App.js 获取store公共信息(简单的方法)

import react from 'react'

class App extends react.Component{

  constructor(props){
    super(props)
    // => 把公共状态信息赋值给当前组件私有状态信息(这样后期可以根据需求玩自己的状态而不影响公共的)
    const { store} = this.props
    cosnt {supNum, oppNum} = stort.getState()

    this.state = {
      supNum:supNum,
      oppNum:oppNum
    }
  }

  render() {
    return (
      <ul>
        <li>{this.state.supNum}</li>
        <li>{this.state.supNum}</li>
      </ul>
    )
    // 当信息变化，更新组件状态
    componentDidMount(){
      const {store} = this.props
      stort.subscrobe(() => {
        // 优化: redux的漏洞，不论改变的当前组件是否用到，只要通知事件池中的执行，当前组件加进去的重新渲染的方法
        const {supNum, oppNum} = store.getState();
        // 判断当前是否改变了才改变状态，没有改变就改变 
        if(supNum != this.state.supNum){
          this.setState({
            supNum: supNum
          })
        }
        if(supNum != this.state.supNum){
          this.setState({
            supNum: supNum
          })
        }
        // setState的同步和异步性
      })
    }
  }
}
export default App;

3.修改redux内的值

import react from 'react'

class Test extends react.Component{
  render() {
    return (
      <buttom onClick={this.handle.bind(this,0)}></buttom>
      <buttom onClick={this.handle.bind(this,1)}></buttom>
  }
  handle = time => {
    // 获取redux的值
    const {store} = this.props
    if(time === 0){
      // 派发行为对象到reducer (最上面)
      store.dispatch({
        type: 'SUPPORT', // 状态标识
        payload: 20      // 值
      })
    }
    store.dispatch({
      type: 'SUPPORT', // 状态标识
      payload: 20      // 值
    })
  }
}
export defaulr Test

redux使用工程化

1.src文件夹内创建store文件夹
2.storen内创建action.type的宏管理

• action-type.js

export const VOTE_SUPPORT = 'VOTE_SUPPORT'
export const VOTE_REDUCING = 'VOTE_REDUCING'

3.在storen创建reducer文件夹

• reducer
  • index.js / 大reducer

  // 合并reducer
  import {combineReducers} from ’redux‘
  
  import userReducer from './userReducer'
  import setReducer from './setReducer'
  
  const reducer = combineReducers({
    user: userReducer,
    set: setReducer
  })
  
  export default reducer
  
  // 以后通过 stort.getState()user.supNum 来获取对应的模块值
  

  • user.js / 小reducer

  // 小reducer 模板
  import * as TYPES from '/action-types'
  const initialState = {
  
  }
  export default function voteReducer(state = initialState, action){
    state = JSON.parse(JSON.stringify(state))
    switch(action.type){
      case TYPES.VOTE_SUPPORT: // 匹配行为标识
        state.supNum += action.payload
      break;
    }
    return state; // => return 的是啥，相当于把原始容器中的状态修改为啥
  }
  

4:创建store / src/store(下的)/index.js

import {createStore} from 'redux'
import reducer from './reducers/index'

const stort = createStore(reducer)
export default stort;

5:模块化事件派发 store下创建actions文件夹

• index.js / 大模块合并

// 合并每个模块下的action
import butac from './but'

const action = {
butac
}
export default action

• useraction.js / 小模块

import * as TYPES from '../action-type'
const useraction = {
 support(item) {
   console.log(item)
   return {
     type: TYPES.VOTE_SUPPORT,
     payload: item
   }
 },
 reducing(item) {
   console.log(item)
   return {
     type: TYPES.VOTE_REDUCING,
     payload: item
   }
 }
}
export default useraction;

• 使用action

import React from 'react'
// redux action
import action from '../store/actions/index';

class But extends React.Component {
render() {
  return (
    <div>
      <button onClick={this.handle.bind(this, 0)}>+</button>
      <button onClick={this.handle.bind(this, 1)}>-</button>
    </div>
  )
}
handle = item => {
  // 获取redux的值
  const { store } = this.props

  if (item === 0) {
    store.dispatch(action.butac.support(1))
    console.log('加')
  } else {
    store.dispatch(action.butac.reducing(1))
    console.log('减')
  }
}
}

export default But;

6:使用redux

import store from './stort/index'
ReactDOM.render(
  <>
  <App store={store} />
  </>,
  document.getElementById('root')
);