在react項目中使用redux的簡單案例

腳手架 create-react-app

1.安裝redux

npm install redux --save

2.redux store目錄文件分配

?-- action.js 動作

?--reducers? 計算屬性集合文件夾

? ? ? ? -- index.js 計算模塊出口

? ? ? ? -- user.js 計算模塊1

? ? ? ? -- test.js 計算模塊2

? -- store.js? redux的store 出口

? -- type.js action 動作名稱類型

結構案例

3.? store代碼

1.action.js 動作整合模塊

import types from '../type.js';

//View視圖 要發送多少種消息，這里就封裝多少種


export const userAction=(data)=>({type:types.USER,data});


export const userTokenAction=(data)=>({type:types.TOKEN,data});

2.type.js 常量名稱類別封裝

export default  {
    TOKEN:'TOKEN',
    USER:'USER',
    USER_NAME:'USER_NAME',
    
}

3. reducers??計算屬性整合

????user.js 計算模塊1 (PS: 計算模塊的js 文件 分成多個?還是?寫成一個 隨自身需求，這里舉例 只寫? ? ? 一個,token.js 和 user.js 是一致的)

import { createStore,combineReducers } from 'redux';
import _type from '../type.js';

//reducer函數會接受兩個參數,分別為之前的 (狀態)state, 動作對象(action)
const initState = '初始化數值';
export default  function User(state = initState ,action){
        const {type,data} =action;
        // console.log("觸發____");
        switch(type){
            case _type.USER:
            //最好是新生成的數據    
            return {...data};
            case _type.USER_NAME:
            return '111';
            case _type.TOKEN:
            return state + '222';
            default:
            return state;
        }
}
 

??index.js 計算模塊出口

import { createStore,applyMiddleware,combineReducers} from 'redux';
import User  from './user'; 
import Token  from './token'; 

//合并多個reducer 具體是否用 combineReducers 方法隨自己需求而定，采用combineReducers 合并時，在調用action方法時，combineReducers中的所有計算方法都會觸發，因此需要注意計算方法中判斷條件！
const allReducers=combineReducers({
    user:User,
    token:Token,
});

export default allReducers;

? 4.redux 導出

import { createStore,applyMiddleware,combineReducers} from 'redux';
import allReducers from './reducers/index';

export default createStore(allReducers);// 創建數據存儲倉庫

? 5.項目工程入口集成

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import serviceUrl from  './service/url';
import { createStore } from 'redux';
import { Provider, connect } from 'react-redux';
import store from './redux/store';

ReactDOM.render(
  <React.StrictMode>
     <Provider store={store}>
       <App />
     </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

4.? 在頁面中運用

import React,{component} from 'react';
import './index.scss';
import { Form, Input, Button, Checkbox,message } from 'antd';
import { Row, Col } from 'antd';
import Config from '../../utils/config';
import { HttpRequest,HttpStatus } from '../../service/http';
import Url from '../../service/url';
import md5 from 'js-md5';
import {  Link } from "react-router-dom";
import {connect} from 'react-redux'
import { userTokenAction,userAction } from '../../redux/actions/action';


 class Login extends React.PureComponent {
    constructor(props){
        super(props);
        
    }
   
    // 調用redux方法
    onFinish = (values) => {
        
        this.props.userToken(11111 || null);
        this.props.userAction(22222 || null);
    };  
    
    
    
    render() { 
     return  <div>
        展示redux store數值{ this.props?.token || '暫無數據'}

        <button onClick={() => {this.onFinish}}>觸發redux方法</button>
     </div>
    
    }
}

// redux store數值暴露
const mapStateToProps=(state)=>{
    return {
        token:state.token,
    }
};

// redux方法暴露
const mapDispatchToProps = (dispatch) => {
    return {
        userToken:(token)=>{
            dispatch(userTokenAction(token))
        },
        userAction:(data)=>{
            dispatch(userAction(data))
        }
    };
};
export default connect(mapStateToProps, mapDispatchToProps)(Login);

? ? ? ??