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 改变，实现了多个组件共享一个变量

希望对你有所帮助