React-Redux应用示例

最新推荐文章于 2024-09-14 22:15:00 发布
最新推荐文章于 2024-09-14 22:15:00 发布
阅读量780 收藏 3
点赞数 2
分类专栏： react 文章标签： react.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_37911706/article/details/125368200
版权

一、简介

  • React-Redux 是 Redux 的官方 React 绑定库。
  • React-Redux 能够使React组件从Redux store中读取数据，并且向 store 分发 actions 以更新数据。
  • React-Redux 并不是 Redux 内置，需要单独安装。
  • React-Redux 一般会和 Redux 结合一起使用。

二、安装redux、react-redux

            npm  install  redux

            npm install react-redux

三、Provider 和 connect

       Provider：它是react-redux 提供的一个 React 组件，作用是把state传给它的所有子组件，也就是说 当你用Provider传入数据后 ，下面的所有子组件都可以共享数据，十分的方便。

       Provider的使用方法是：用Provider组件包裹在最外层的组件

<Provider  store={ store }>

            <App />

</Provider>

     注意：一定是在Provider中传store

  connect：它是一个高阶组件 所谓高阶组件就是给它传入一个组件，它会返回新的加工后的组件，connect 方法有四个参数([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])后面两个参数可以不写，不写的话它是有默认值的。主要关注前两个参数： mapStateToProps和 mapDispatchToProps;

  • mapStateToProps：如果定义该参数，组件将会监听 Redux store 的变化。任何时候，只要 Redux store 发生改变，mapStateToProps 函数就会被调用。
  • mapDispatchToProps：如果传递的是一个对象，那么每个定义在该对象的函数都将被当作 Redux action creator，对象所定义的方法名将作为属性名；每个方法将返回一个新的函数，函数中dispatch方法会将 actioncreator 的返回值作为参数执行。这些属性会被合并到组件的 props 中。

connect的使用方法是：把指定的state和指定的action与React组件连接起来，后面括号里面写UI组件名

                connect(mapStateToProps,mapDispatchToProps)(TbItem)

四、示例：

      例1：利用react-redux实现计数器

           1、目录结构

                

         2、store.js

import {createStore} from "redux";
export const ADD = 'ADD';
export const MINUS = 'MINUS';

function reducer (state= {count:0},action){
    console.log('Action:',action);
    switch (action.type) {
        case ADD:
            return { count: state.count + 1}
        case MINUS:
            return { count: state.count - 1}
        default:
            return state
    }
}
let store = createStore(reducer);
export default store;

         3、action.js

function add() {
    return {
        type: 'ADD'
    }
}

function minus() {
    return {
        type: 'MINUS'
    }
}

const action = { add,minus }

export default action;

         4、Counter1.js

import React,{ Component } from "react";
import { connect } from "react-redux";
import action from "../actions/action";

class Counter1 extends Component {
    render() {
        return (
            <div>
                <p>{ this.props.count }</p>
                <button onClick={this.props.add }>Count++</button>
                &nbsp;&nbsp;&nbsp;
                <button onClick={ this.props.minus}>count--</button>
            </div>
        )
    }
}
const mapStateToProps = state=> state

const mapDispatchToProps = {
    ...action
}

export default connect(mapStateToProps,mapDispatchToProps)(Counter1);

      5、App.js

import logo from './logo.svg';
import './App.css';
import Counter1 from "./components/Counter1";
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <Counter1 />
      </header>
    </div>
  );
}

export default App;

       6、index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { Provider } from "react-redux";
import store from "./store/store";

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

action：行为 它是一个对象 里面必有type来指定其类型 这个类型可以理解为你要做什么，reducer要根据action的type来返回不同的state 每个项目有且可以有多个action。它是 store 数据的唯一来源。通过 store.dispatch() 将 action 传到 store。记住 actions 只是描述了有事情发生了这一事实，并没有描述应用如何更新 state。

reducer： 可以理解为一个专门处理state的工厂，给它一个旧数据它会根据不同action.type返回新的数据，每个项目有且可以有多个reducer。reducers 指定了应用状态的变化如何响应 actions 并发送到 store 的。

store： store本质上是一个状态树，保存了所有对象的状态。任何UI组件都能直接的从store访问特定对象的状态。每个项目有且只能有一个store。

  • 提供 getState() 方法获取 state；
  • 提供 dispatch(action) 方法更新 state；
  • 通过 subscribe(listener) 注册监听器;

例2：多组件共享store

         

        (1)constants.js（定义公共方法名）

export const ADD_NUMBER = 'ADD_NUMBER'
export const SUB_NUMBER = 'SUB_NUMBER'

       (2)actionCreators.js(专门存放方法名)

import {
    ADD_NUMBER,
    SUB_NUMBER
} from "./constants";

export const addAction = num => ({
    type: ADD_NUMBER,
    num
})

export const subAction = num => ({
    type: SUB_NUMBER,
    num
})

       (3)reducer.js(存放事件)

import {
    ADD_NUMBER,
    SUB_NUMBER
} from "../action/constants";

const deflateState = {
    counter: 0
}

function reducer(state = deflateState,action){
    switch (action.type){
        case ADD_NUMBER:
            return {...state,counter: state.counter + action.num }
        case SUB_NUMBER:
            return {...state,counter: state.counter - action.num }
        default:
            return state;
    }
}
export default reducer;

        (4)store.js文件

import { createStore } from "redux";
import reducer from "../reducer/reducer";

const store = createStore(reducer);

export default store;

       (5)home.js(Home组件)

import React,{ Component } from "react";
import store from "../redux/store/store";
import { addAction } from "../redux/action/actionCreators";

export default class Home extends Component {
    constructor(props) {
        super(props);
        this.state = {
            counter: store.getState().counter
        }
    }
    //订阅
    componentDidMount() {
        this.unSubscribe = store.subscribe(()=>{
            this.setState({
                counter: store.getState().counter
            })
        })
    }
    //取消订阅
    componentWillUnmount() {
        this.unSubscribe();
    }
    render() {
        return (
            <div>
                <h2>Home</h2>
                <h3>当前： { this.state.counter }</h3>
                <button onClick={ event => this.increment() }>+1</button>
                <button onClick={ event => this.addNumber(5) }>+5</button>
            </div>
        )
    }

    increment(){
        store.dispatch(addAction(1));
    }

    addNumber(num){
        store.dispatch(addAction(num));
    }
}

       （7）about.js(About组件)

import React,{ Component } from "react";
import store from "../redux/store/store";
import { addAction } from "../redux/action/actionCreators";

export default class Home extends Component {
    constructor(props) {
        super(props);
        this.state = {
            counter: store.getState().counter
        }
    }
    //订阅
    componentDidMount() {
        this.unSubscribe = store.subscribe(()=>{
            this.setState({
                counter: store.getState().counter
            })
        })
    }
    //取消订阅
    componentWillUnmount() {
        this.unSubscribe();
    }
    render() {
        return (
            <div>
                <h2>Home</h2>
                <h3>当前： { this.state.counter }</h3>
                <button onClick={ event => this.increment() }>+1</button>
                <button onClick={ event => this.addNumber(5) }>+5</button>
            </div>
        )
    }

    increment(){
        store.dispatch(addAction(1));
    }

    addNumber(num){
        store.dispatch(addAction(num));
    }
}

       (8)App.js

import logo from './logo.svg';
import './App.css';
import Home from "./components/home";
import About from "./components/about";
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <Home />
        <About/>
      </header>
    </div>
  );
}

export default App;

        (9)index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import store from "./redux/store/store";
import { Provider } from "react-redux";

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

例3、合并多个reducer

        (1)目录结构

         

        (2)action文件

              2.1、changeAge_action.js

export const CLICK_ADD = 'CLICK_ADD';
export const CLICK_SUB = 'CLICK_SUB';

export function clickAdd() {
    return {
        type: CLICK_ADD
    }
}
export function clickSub() {
    return {
        type: CLICK_SUB
    }
}

              2.2、inputInfo.js

export const INPUT_INFO = 'INPUT_INFO';

export function inputInfo(name){
    return {
        type: INPUT_INFO,
        name
    }
}

     (3)reducer文件

           3.1、changeAge_reducer.js

import { CLICK_ADD,CLICK_SUB } from "../actions/changeAge_action";

function initialState() {
    return {
        age: 20
    };
}

function changeAge(state=initialState(),action) {
    switch (action.type) {
        case CLICK_ADD: {
            return {
                ...state,
                age: state.age + 1
            }
        }
        case CLICK_SUB: {
           return {
               ...state,
               age: state.age - 1
           }
        }
        default:
            return state;
    }
}
export default changeAge;

             3.2、inputInfo_reducer.js

import { INPUT_INFO } from "../actions/inputInfo_action";
function initialState() {
    return {
        name: "ZhangSan"
    }
}

function inputInfo(state= initialState(),action) {
    switch (action.type) {
        case INPUT_INFO: {
            return {
                ...state,
                name: action.name
            }
        }
        default:
            return state;
    }
}

export default inputInfo;

             3.3、rootReducer.js

           

      (4)store.js文件

import { createStore } from "redux";
import rootReducer from "../reducer/rootReducer";

const store = createStore(rootReducer);

export default store;

      (5)组件

          5.1、Name组件(name.js)

import React,{ Component } from "react";
import PropTypes from "prop-types";

import { connect } from "react-redux";

class Name extends Component {
    render() {
        const { name } = this.props
        return (
            <div>
                My name is <i>{ name }</i>
            </div>
        )
    }
}
Name.propTypes = {
    name: PropTypes.string.isRequired
}

const mapStateToProps = (state)=> {
    return {
        name: state.Name_store.name
    }
}
export default connect(mapStateToProps)(Name);

          5.2、Age组件(age.js)

import React,{ Component } from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import {clickAdd,clickSub } from "../actions/changeAge_action";

class Age extends Component{
    constructor(props) {
        super(props);
        this.clickAdd = this.clickAdd.bind(this);
        this.clickSub = this.clickSub.bind(this);
    }
    render() {
        const { age } = this.props
        return (
            <div>
                I am <i>{ age } </i>years old this year
                &nbsp;&nbsp;&nbsp;
                <button onClick={this.clickAdd }>Add Age</button>
                <button onClick={this.clickSub }>Sub Age</button>
            </div>
        )
    }
    clickAdd(event) {
        this.props.dispatch(clickAdd());
    }
    clickSub(event) {
        this.props.dispatch(clickSub());
    }
}

Age.propTypes = {
    age: PropTypes.number.isRequired
}

const mapStateToProps = (state) => {
    return {
        age: state.Age_store.age
    }
}

export default connect(mapStateToProps)(Age);

            5.3、Form组件(form.js)

import React,{Component} from "react";
import {connect} from "react-redux";
import { inputInfo } from "../actions/inputInfo_action";

class Form extends Component {
    constructor(props) {
        super(props);
        this.clickSubmit = this.clickSubmit.bind(this);
    }
    render() {
        return (
            <div>
                <input type={"text"} placeholder={"name"} id={"nameInput"}/>
                <button onClick={ this.clickSubmit }>提交</button>
            </div>
        )
    }
    clickSubmit(event) {
        let name = document.getElementById('nameInput').value;
        console.log(name);
        this.props.dispatch(inputInfo(name));
    }
}

export default connect()(Form);

       (6)App.js

import logo from './logo.svg';
import './App.css';
import Name from "./redux/components/name";
import Age from "./redux/components/age";
import Form from "./redux/components/form";
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <Name />
          <br/>
        <Age />
          <br/>
        <Form />
      </header>
    </div>
  );
}

export default App;

       (7)index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { Provider } from "react-redux";
import store from "./redux/store/store";

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

运行效果：

            

 

上庸者-不服周
关注
专栏目录
React 学习笔记 —— redux 示例完整版
叹之
04-08 477
描述：组件 Count、组件 Person，将数据存入 Redux，实现数据共享 目录结构 App.js import React, { Component } from 'react' import Count from './containers/Count' import Person from './containers/Person' // 引入 容器组件 并使用 export default class App extends Component { render() { ..
react-redux-promise-example:使用react-redux和redux-promise的非常基本的示例
04-30
使用react-redux和redux-promise的非常基本的示例 To Start the Application Run server - go to server repo - run npm install - node index.js In main app - run npm install - npm start 当promise得到解决时...
【React】react-redux 案例
qq_45677671的博客
05-13 1210
文章目录容器组件和UI组件改写计数器知识点总结 容器组件和UI组件 React-Redux 将所有组件分成两大类： UI 组件（presentational component） 容器组件（container component） UI组件 容器组件 作用 描述如何展现（骨架、样式） 描述如何运行（数据获取、状态更新） 直接使用Redux 否 是 数据来源 props 监听Redux state 数据修改 从props调用回调函数 向Redux派发actions
08_React redux
最新发布
所学所思
09-14 1243
3、redux 的 reducer 函数必须是一个纯函数（不能写 unshift 等方法添加数据，如果 preState 被改写 reducer 就不纯了，页面也不会更新）！3、重点：Person 的 reducer 和 Count 的 reducer 要使用 combineReducers 进行合并，合并后的总状态时一个对象！5、备注：容器给 UI 传递：状态（这里的状态是 redux 中的状态）、操作状态的方法，均通过 props 传递。
一个最最简单的React-Redux使用例子
iteye_944的博客
08-06 181
Redux 是 JavaScript 状态容器，提供可预测化的状态管理。 官方文档：http://cn.redux.js.org//index.html#   要点（官方）：应用中所有的 state 都以一个对象树的形式储存在一个单一的 store 中。 惟一改变 state 的办法是触发 action，一个描述发生什么的对象。为了描述 action 如何改变 state 树，你需要编...
react-redux简单案例
m0_37931969的博客
04-21 301
react-redux 用法 一. 配置环境，安装包 全局安装 create-react-app 创建一个react项目 npm i create-react-app -g 创建一个项目 npx create-react-app react-redux-demo 安装redux npm i redux --save 安装react-redux npm i react-redux 二. 用法 5. 首先在根文件index.js下引入 Provider ，因为只有 使组件层级中的 con
react-redux小例子
Good_zwn的博客
08-07 245
1.定义Action的类别 export const ADD = 0; export const SUB = 1; 2.定义Action的生成器 import { ADD, SUB } from "./action-type"; export function addCreator(num = 1) { return { type: ADD, data: num ...
react-redux-demo:react-redux实现组件通信实例
05-17
在IT行业中，React和Redux是两个非常重要的JavaScript库，它们分别用于构建用户界面和管理应用状态。本项目“react-redux-demo...通过实践这个示例，你将对React和Redux有更深入的理解，并能更好地应用到实际项目中去。
原生实现一个react-redux的代码示例
01-19
自己动手实现一个react-redux 之前试过自己动手实现一个redux，这篇blog主要记录动手实现一个react-redux的过程。 这个react-redux还有一点点小瑕疵，我以一个计数器作为例子来实现的。 这是目录结构: 这里的...
react-redux-starterkit-2020:每个人都在寻找的另一个react-redux-starterkit
05-28
总结，`react-redux-starterkit-2020`是一个强大而全面的开发起点，它结合了React和Redux的优点，提供了优秀的文件结构、实用工具和示例应用，旨在加速开发流程，提高代码质量。无论是初学者还是经验丰富的开发者，...
react-redux使用实例
lilei_ndsc的博客
08-08 1024
/** * redux使用 * 1.创建component页面 */ import React, { Component, PropTypes } from 'react'; import { Link,Router, Route } from 'react-router'; import { connect } from 'react-redux'; import * as act
React与Redux开发实例精解(完整版+目录)
02-25
React与Redux开发实例精解(完整版+目录)，作者：刘一奇。
react+react-redux+redux实现的todolist案例
02-09
react+react-redux+redux实现的todolist案例,适合初学者学习，又想通过redux进军react－redux可以尝试
用React-redux搭建的小案例分析
weixin_62094186的博客
04-07 399
React - redux 搭建的小项目分析
react之redux详解及例子展示（简单）
涛哥~梦
10-18 588
（0）初始准备 npm install --save redux npm install --save react-redux npm install --save-dev redux-devtools （1）redux各个参数的相关介绍 1.state： 存储数据的仓库 2.action： 改变state中数据的方法 3.reducer: 就是将state和action联系起来，从而改变st...
React Redux应用示例详解
sinat_40572875的博客
11-13 640
redux是一个独立专门用于做状态管理的JS库(不是react插件库)它可以用在react、angular、vue等项目中，但基本与react配合使用作用：集中式管理react应用中多个组件共享的状态使用创建 Redux store接受reducer函数作为命名参数使用的好用的默认设置自动设置 store为 React 应用程序组件提供 Redux store使用 React-Redux组件包裹你的传递 Redux store 如使用。
react-redux简单例子
黄星的专栏
11-13 1279
redux的作用 react 本身是通过props传递属性的，层级嵌套太深的话，传递属性就需要一层层向下传递，回调也需要一层层的回调。 redux 的作用就是实现跨级传递属性方法和回调 react-redux 是连接react &amp;amp;amp;amp;&amp;amp;amp;amp; redux的插件 简单例子 实现数字增加和减少 //app.js import React from 'react' import Reac...
Redux,React-Redux简单示例
不知道写的什么
03-29 167
Redux,React-Redux简单示例 Counter示例 //index.js import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import * as serviceWorker from './serviceWorker'; import App from "./compo...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

上庸者-不服周

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值