Redux及React-redux的简单使用 react.jsredux

在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.jsredux的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 defaultfunction 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 Userfrom './user'; import Tokenfrom './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( 【Redux及React-redux的简单使用】 , 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 展示redux store数值{ this.props?.token || '暂无数据'} } } // 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);