React React-Redux的安装，使用

本人第react-redux 小白一个，如果你是大佬，路过即可

其实在使用redux 之前，我并不了解redux 的作用，我在编写react的过程中遇到一个登录的问题

在不断的使用React的过程中，我们在一个页面上使用多个组件

比如一个首页----组成可能如下：

<CHeader></CHeader>
<Content></Content>
<CFooter></CFooter>

我们在CHeader 中有一个登录的功能，那么发现登录之后Content 根本就不知道当前的登录状态，

那么如何实现在CHeader中对某些变量进行了修改，在Content 中能实时的获取到修改之后的变量

或许Redux能帮我解决这个问题

1. 安装：

yarn add redux react-redux

如何使用：我先看一下自己的目录结构：

为了清晰明了我单独创建了这样的一个项目，专门来看redux，主要是src，我们看在src下面有四个文件夹，pages，routers,store,utils 根据文件夹的命名方式，我们大概可以知道这几个文件夹的作用，pages 页面组件，routers 路由组件，store 数据存储组件 utils 工具组

先看：store 这个文件夹：

包含 action.js，index.js, reducer.js,types.js 这些文件名字都是自己起的，我们一个一个的来看这些文件的内容：

index.js

import { createStore, combineReducers } from "redux";
import { calculate } from './reducer'// 全局你可以创建多个reducer 在这里统一在一起
const rootReducers = combineReducers({calculate})
// 全局就管理一个store
export const store = createStore(rootReducers)

types.js

export const INCREMENT="INCREMENT";
export const REDUCE="REDUCE";

actions.js

import { INCREMENT,REDUCE } from './types.js';
export const incrementAction = {type: INCREMENT, count: 2}
export const reduceAction = {type: REDUCE, count: 1}

reducer.js

import { INCREMENT,REDUCE } from './types.js'interface ReduxState {num: number
}interface Action {type: string,count:  number,
}const initData = {num: 0
}const calculate = (state: ReduxState = initData, action: Action ) => {switch (action.type) {case INCREMENT:return {num: state.num + action.count}case REDUCE:return {num: state.num - action.count}default:return state}
}
export {calculate}

然后我们来看：utils文件夹

只有一个History.js 内容如下：

import { createBrowserHistory } from 'history'export default createBrowserHistory();

来继续看routers文件夹：

index.js 内容：

import React from 'react'
import {Route, Routes} from 'react-router-dom'
import Home from '../pages/Home.js'
export default () => {return (<Routes><Route path="/" element={<Home />} /></Routes>)
}

pages文件夹：

CHeader.js

import React from 'react';
import { incrementAction, reduceAction } from '../store/action.js';
import { connect } from 'react-redux';
const mapStateToProps = (state: any) => {return {num: state.calculate.num};
};
const mapDispatchToProps = (dispatch) => ({increment: () => dispatch(incrementAction),decrement: () => dispatch(reduceAction)
});
class CHeader extends React.Component{constructor(props) {super(props); }componentDidMount(){console.log(this.props)}render() {const container={backgroundColor:'gray',height:'400px',width:'400px'}return <div style={container}><button onClick={this.props.increment}>增加</button><button onClick={this.props.decrement}>减少</button><p>{this.props.num}</p></div>}
}export default connect(mapStateToProps,mapDispatchToProps)(CHeader);

Content.js

import React from 'react';
import { incrementAction, reduceAction } from '../store/action.js';
import { connect } from 'react-redux';const mapStateToProps = (state: any) => {return {num: state.calculate.num};
};const mapDispatchToProps = (dispatch) => ({increment: () => dispatch(incrementAction),decrement: () => dispatch(reduceAction)
});class Content extends React.Component{constructor(props) {super(props); }componentDidMount(){console.log(this.props)}render() {const container={backgroundColor:'red',height:'200px',width:'200px'}return (<div style={container}><button onClick={this.props.increment}>增加</button><button onClick={this.props.decrement}>减少</button><p>{this.props.num}</p></div>)}
}export default connect(mapStateToProps,mapDispatchToProps)(Content);

Home.js

import React from 'react';
import CHeader from './CHeader.js'
import Content from './Content.js'
class Home extends React.Component{constructor(props) {super(props); }componentDidMount(){console.log(this.props)}render() {return(<div><CHeader></CHeader><Content></Content></div>)}
}export default Home;

最后，我们来看看App.js

import React from 'react';
import { BrowserRouter as Router } from 'react-router-dom'
import { Provider } from 'react-redux'
import history from './utils/History.js'
import { store } from './store/index.js'
import Routers from './routers/index.js'function App() {return (<Provider store={store}><Router history={history}><Routers/></Router></Provider>);
}export default App;

这个就是整个Redux的项目

产生结果：

两个区域的按钮，对同一个num 改变，实现了多个组件共享一个变量

希望对你有所帮助

React React-Redux的安装，使用相关推荐

使用Flow检查React，Redux和React-Redux的全面指南
by Fabian Terh 由Fabian Terh 使用Flow检查React,Redux和React-Redux的全面指南 (A comprehensive guide to type chec ...
【前端】react and redux教程学习实践，浅显易懂的实践学习方法。
前言前几天,我在博文[前端]一步一步使用webpack+react+scss脚手架重构项目中搭建了一个react开发环境.然而在实际的开发过程中,或者是在对源码的理解中,感受到react中用的最多 ...
React.js 小书 Lesson5 - React.js 基本环境安装
React.js 小书 Lesson5 - React.js 基本环境安装本文作者:胡子大哈本文原文:http://huziketang.com/books/react/lesson5 转载请注明 ...
如何使用React和Redux前端创建Rails项目
by Mark Hopson 马克·霍普森(Mark Hopson) 如何使用React和Redux前端(加上Typescript!)创建Rails项目 (How to create a Rails ...
shopify二次开发教程_详细教程：如何将Shopify的Storefront API与React和Redux结合使用...
shopify二次开发教程 by Chris Frewin 克里斯·弗里温(Chris Frewin) 详细教程:如何将Shopify的Storefront API与React和Redux结合使用 ( ...
使用React，Redux和Router进行真正的集成测试
by Marcelo Lotif 通过马塞洛·洛蒂夫(Marcelo Lotif) 使用React,Redux和Router进行真正的集成测试 (Real integration tests with ...
Rekit Studio简介：用于React和Redux开发的真实IDE
by Nate Wang 内特·王 Rekit Studio简介:用于React和Redux开发的真实IDE (Introducing Rekit Studio: a real IDE for Rea ...
React 全家桶（react脚手架 redux react-redux react-router-dom ui库 reactHook）含自定义hook的方法及使用
文章目录 React 入门 React 简介 React 为何物为何学习 React React 初体验来一发 Hello React 创建虚拟 DOM 的两种方式:JS 和 JSX 虚拟 DOM ...
React (fetch redux初识 state action reducer getState dispatch .subscribe 取消监听 ActionTypes Action Crea）
axios数据交互安装axios cnpm i axios --save 2.发起http请求 this.axios.get('/api/menulist').then(res=>{conso ...
一篇文章读懂 React and redux 前端开发 -DvaJS, a lightweight and elm-style framework.
DvaJS: React and redux based, lightweight and elm-style framework. https://dvajs.com/ 实例项目源码:https:/ ...

React React-Redux的安装，使用

React React-Redux的安装，使用相关推荐

最新文章

热门文章