关于react.js:Redux及Reactredux的简单使用

在 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 视图 要发送多少种音讯，这里就封装多少种
 
// 调用 user.js 中的计算属性
export const userAction=(data)=>({type:types.USER,data});
 
// 调用 token.js 中的计算属性
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
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);