react 09之狀態(tài)管理工具1 redux+ react-thunk的使用實(shí)現(xiàn)跨組件狀態(tài)管理與異步操作

• npm install redux react-redux

• npm i redux-thunk

• redux-thunk

  • redux-thunk是一個(gè)Redux的中間件，它允許你在Redux中編寫異步的action creators。

store / index.js store的入口文件

import { applyMiddleware, legacy_createStore } from 'redux';
// 引入redux-thunk，用于支持異步action
import reduxThunk from 'redux-thunk';
// 引入?yún)R總后的reducer
import reducers from './reducers';

const store = legacy_createStore(reducers, applyMiddleware(reduxThunk))
export default store;

index.js 在項(xiàng)目入口文件 引入

import App from "./7redux/2使用thunk/App類";
import store from "./store/index.js";
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <Provider store={store}>
        <App />
    </Provider>
);

store / actionType.js 定義action的唯一標(biāo)識(shí)

// 常量 唯一標(biāo)識(shí) 標(biāo)記當(dāng)前action的唯一性
export const FORM_ADD_COUNT = 'form_addCount'
export const FORM_SUB_COUNT = 'form_subCount'
export const LIST_ADD_LIST = 'list_addList'

store / reducers / index.js

/*
	該文件用于匯總所有的reducer為一個(gè)總的reducer
*/
//引入combineReducers，用于匯總多個(gè)reducer
import { combineReducers } from "redux";
//引入為form組件服務(wù)的reducer
import form from "./form";
//引入為list組件服務(wù)的reducer
import list from "./list";

//匯總所有的reducer變?yōu)橐粋€(gè)總的reducer
export default combineReducers({
  form,
  list,
});

store / actions / form.js

/*
	該文件專門為Form組件生成相關(guān)action對(duì)象
*/
import { FORM_ADD_COUNT, FORM_SUB_COUNT } from "../actionType";

export const form_addCount = (data) => ({ type: FORM_ADD_COUNT, data });
export const form_subCount = (data) => ({ type: FORM_SUB_COUNT, data });

export const formAddAsync = (data) => {
  return (dispatch) => {
    setTimeout(() => {
      dispatch(form_addCount(data));
    }, 2000);
  };
};

store / reducers / form.js

import { FORM_ADD_COUNT, FORM_SUB_COUNT } from "../actionType";
/**
 * form組件的reducer
 */
// 初始狀態(tài)
let initSate = {
  count: 0
};
export default function formReducer(state = initSate, action) {
  switch (action.type) {
    case FORM_ADD_COUNT:
      return {
        ...state,
        count: state.count + 1
      }
    case FORM_SUB_COUNT:
      return {
        ...state,
        count: state.count - 1
      }
    default:
      return state;
  }
}

store / actions / list.js

/*
	該文件專門為List組件生成相關(guān)action對(duì)象
*/
import { LIST_ADD_LIST } from "../actionType";

// 同步action
export const list_addList = (data) => ({ type: LIST_ADD_LIST, data });

store / reducers / list.js

import { LIST_ADD_LIST } from '../actionType'

// 初始狀態(tài)
const initSate = {
    list:[]
}

export default function listReducer(state=initSate,action){
    switch(action.type){
        case LIST_ADD_LIST:
            return {...state,list:[...state.list,action.data]}
        default:
            return state
    }
}

使用 App類.jsx

import React, { Component } from 'react';
import { connect } from "react-redux";
import { formAddAsync, form_addCount, form_subCount } from "../../store/actions/form";
import { list_addList } from "../../store/actions/list";
import ASon from "./ASon";
class App extends Component {
 state = {
 }
 componentDidMount() {}
 render(){
  // console.log('111',this.props);
  const { count,list } = this.props
  const addList = ()=>{
    let str = list && list.length ? '我是' + (list.length + 1) : '我是1'
    let arr = []
    arr.push(str)
    this.props.list_addList(arr)
  }
   return (
     <div>
      app
      <p>Count: {count}</p>
         <button onClick={this.props.form_addCount}>Increment</button>
         <button onClick={this.props.form_subCount}>Decrement</button>
         <button onClick={this.props.formAddAsync}>異步add</button>
         <div>----</div>
         <ASon></ASon>
         <div>----</div>
         <div>
          {
            list ? list.map((item,idx)=>{
              return (
                <div key={idx}>
                  {item}
                </div>
              )
            }) : ''
          }
         <button onClick={addList}>addList</button>
         </div>
     </div>
   )
 }
}

// 拿到redux的值
const mapStateToProps = (state) => {
  return {
    count: state.form.count,
    list: state.list.list,
  };
};
// 拿到redux 所觸發(fā)的
const mapDispatchToProps = {
  form_addCount,
  form_subCount,
  formAddAsync,
  list_addList
}
export default connect(mapStateToProps, mapDispatchToProps)(App);

ASon.jsx

import React from 'react';
import { connect } from "react-redux";
import { form_addCount } from "../../store/actions/form";
const ASon = (props) => {
    return (
        <div className='content'>
          ASon 組件 count-{props.count} <br/>
          <button onClick={props.form_addCount}>Increment</button>
        </div>
    )
}

// 拿到redux的值
const mapStateToProps = (state) => {
  return {
    count: state.form.count
  };
};
// 拿到redux 所觸發(fā)的
const mapDispatchToProps = {
  form_addCount,
}
export default connect(mapStateToProps, mapDispatchToProps)(ASon);

效果

文章來源地址http://www.zghlxwxcb.cn/news/detail-648198.html

到了這里，關(guān)于react 09之狀態(tài)管理工具1 redux+ react-thunk的使用實(shí)現(xiàn)跨組件狀態(tài)管理與異步操作的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！