07-React-redux和redux的使用

最新推荐文章于 2024-05-20 18:29:30 发布
最新推荐文章于 2024-05-20 18:29:30 发布
阅读量372 收藏
点赞数
分类专栏： React自学 文章标签： react.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_57262196/article/details/133954307
版权

07.react-redux和redux的使用

1.redux的使用

1).redux的理解

a.redux是什么
  1. redux是一个专门用于做状态管理的JS库(不是react插件库)。
  2. 它可以用在react, angular, vue等项目中, 但基本与react配合使用。
  3. 作用: 集中式管理react应用中多个组件共享的状态。
b.什么情况下需要使用redux
  1. 某个组件的状态，需要让其他组件可以随时拿到（共享）。
  2. 一个组件需要改变另一个组件的状态（通信）。
  3. 总体原则：能不用就不用, 如果不用比较吃力才考虑使用。
c.redux工作流程

2).redux的三个核心概念

a.action

  1. 动作的对象

  2. 包含2个属性

    • type：标识属性, 值为字符串, 唯一, 必要属性

    • data：数据属性, 值类型任意, 可选属性

例子：
{ type: 'ADD_STUDENT',data:{name: 'tom',age:18} }
b.reducer
  1. 用于初始化状态、加工状态。
  2. 加工时，根据旧的state和action， 产生新的state的纯函数。
c.store

  1. 将state、action、reducer联系在一起的对象

  2. 如何得到此对象?

    1. import {createStore} from 'redux'

    2. import reducer from './reducers'

    3. const store = createStore(reducer)

  3. 此对象的功能?

    1. getState(): 得到state
    2. dispatch(action): 分发action， 触发reducer调用, 产生新的state
    3. subscribe(listener): 注册监听, 当产生了新的state时, 自动调用

3).redux的使用

需求：

实现：

a.纯react实现：
// Count.jsx
export default class Count extends Component {
    state = {
        count: 0
    }
    // 加法
    increment = () => {
        const { value } = this.seleteNumber;
        const { count } = this.state;
        this.setState({ count: count + (+value) })
    }
    // 减法
    decrement = () => {
        const { value } = this.seleteNumber;
        const { count } = this.state;
        this.setState({ count: count - (+value) })
    }
    // 当前求和为奇数再加
    incrementIfOdd = () => {
        const { value } = this.seleteNumber;
        const { count } = this.state;
        if (count%2!=0) {
            this.setState({ count: count + (+value) })   
        }
    }
    // 异步加
    incrementAsync = () => {
        const { value } = this.seleteNumber;
        const { count } = this.state;
        setInterval(()=>{
            this.setState({ count: count + (+value) })   
        },500)
    }
    render() {
        const { count } = this.state;
        return (
            <div>
                <h1>当前求和为:{count}</h1>
                <select ref={c => this.seleteNumber = c}>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>&nbsp;
                <button onClick={this.increment}>+</button>&nbsp;
                <button onClick={this.decrement}>-</button>&nbsp;
                <button onClick={this.incrementIfOdd}>当前求和为奇数再加</button>&nbsp;
                <button onClick={this.incrementAsync}>异步加</button>
            </div>
        )
    }
}
b.redux实现：

  1. 去除Count组件自身的状态

    // Count.jsx
export default class Count extends Component {
    // 加法
    increment = () => {
        const { value } = this.seleteNumber;
    }
    // 减法
    decrement = () => {
        const { value } = this.seleteNumber;
    }
    // 当前求和为奇数再加
    incrementIfOdd = () => {
        const { value } = this.seleteNumber;
    }
    // 异步加
    incrementAsync = () => {
        const { value } = this.seleteNumber;
    }
    render() {
        return (
            <div>
                <h1>当前求和为:？？？</h1>
                <select ref={c => this.seleteNumber = c}>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>&nbsp;
                <button onClick={this.increment}>+</button>&nbsp;
                <button onClick={this.decrement}>-</button>&nbsp;
                <button onClick={this.incrementIfOdd}>当前求和为奇数再加</button>&nbsp;
                <button onClick={this.incrementAsync}>异步加</button>
            </div>
        )
    }
}

  2. 根据redux的原理图，现在src文件夹下新建一个redux文件夹，然后在这个文件夹中新建store.js和count_reducer.js

  3. 在store.js引入redux中的legacy_createStore函数，创建一个store，并将其暴露 （旧版中的createStore被弃用了,这里使用新版的legacy_createStore）

    //该文件专门用于暴露一个store对象，整个应用只有一个store对象
// 引入legacy_createStore,专门用于创建redux中最为核心的store对象
import { legacy_createStore } from "redux";

// 暴露store
export default legacy_createStore(countReducer)

    store对象

    1. 作用: redux库最核心的管理对象
    2. 它内部维护着:
      1. state
      2. reducer

  4. legacy_createStore调用时要传入一个为其服务的reducer，count_reducer.js用于创建一个为Count组件服务的reducer，reducer的本质就是一个函数

    // count_reducer.js
const initState=0
// reducer函数会接到两个参数，分别为：之前的状态(preState),动作对象(action)
export default function countReducer(preState=initState,action) {
    console.log(preState,action);
    // 从action对象中获取：type、data
    const {type,data}=action
    switch (type) {
        case 'increment':
            return preState+data;
        case 'decrement':
            return preState-data;
        default:
            return preState;
    }
}

    注意点：

    1. reducer的本质是一个函数，接收：preState、action,返回加工后的状态
    2. reducer有两个作用：初始化状态，加工状态
    3. reducer被第一次调用时，是store自动触发的，传递的preState是undefined
    // store.js
// 引入为Count组件服务的reducer
import countReducer from './count_reducer'

  5. 在Count组件中分发给store对应的action对象

    // 引入store,用于获取redux中保存状态
import store from '../../redux/store';
export default class Count extends Component {
    // 加法
    increment = () => {
        const { value } = this.seleteNumber;
        store.dispatch({ type: 'increment', data: (+value) })
    }
    // 减法
    decrement = () => {
        const { value } = this.seleteNumber;
        store.dispatch({ type: 'decrement', data: (+value) })
    }
    // 当前求和为奇数再加
    incrementIfOdd = () => {
        const { value } = this.seleteNumber;
        const count = store.getState();
        if (count % 2 !== 0) {
            store.dispatch({ type: 'increment', data: (+value) })
        }
    }
    // 异步加
    incrementAsync = () => {
        const { value } = this.seleteNumber;
        setInterval(() => {
            store.dispatch({ type: 'increment', data: (+value) })
        }, 500)
    }
    render() {
        return (
            <div>
                <h1>当前求和为:{store.getState()}</h1>
                <select ref={c => this.seleteNumber = c}>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>&nbsp;
                <button onClick={this.increment}>+</button>&nbsp;
                <button onClick={this.decrement}>-</button>&nbsp;
                <button onClick={this.incrementIfOdd}>当前求和为奇数再加</button>&nbsp;
                <button onClick={this.incrementAsync}>异步加</button>
            </div>
        )
    }
}

    注意点：

    1. store.dispatch()是用来分发action对象给redux，需要传入一个对象，里面type属性指定状态，data属性存储需要变化的数值
    2. store.getState()用来读取redux中reducer存储的数据

  6. 在index.js中检测store中状态的改变，一旦发生改变重新渲染

    redux只负责管理状态，至于状态的改变驱动着页面的展示，要靠我们自己写。

    createRoot(document.getElementById('root')).render(<App />)
store.subscribe(() => {
    createRoot(document.getElementById('root')).render(<App />)
})

  7. 新建一个count_action.js文件，count_action.js专门用于创建action对象

    按照上面的写法不符合redux完整的工作流程，没有经过创建action对象这个过程

    //count_action.js 
// 表达式返回一个对象用小括号包着
export const createIncrementAction = data => ({ type: 'increment', data })
export const createDecrementAction = data => ({ type: 'decrement', data })

    为了便于管理，符合集体开发环境，可以将action对象中type类型的常量值进行定义，便于管理的同时防止程序员单词写错，创建constant.js

    // constant.js
export const INCREMENT='increment'
export const DECREMENT='decrement'

    //count_action.js 
// 引入变量名常量
import { INCREMENT, DECREMENT } from './constant'
export const createIncrementAction = data => ({ type: INCREMENT, data })
export const createDecrementAction = data => ({ type: DECREMENT, data })

    import { INCREMENT, DECREMENT } from './constant'
const initState = 0
export default function countReducer(preState = initState, action) {
    const { type, data } = action
    switch (type) {
        case INCREMENT:
            return preState + data;
        case DECREMENT:
            return preState - data;
        default:
            return preState;
    }
}

  8. 实现异步action——修改“异步加”功能

    1.明确：延迟的动作不想交给组件自身，想交给action
    2.何时需要异步action：想要对状态进行操作，但是具体的数据靠异步任务返回。

    //count_action.js 
// 引入变量名常量
import { INCREMENT, DECREMENT } from './constant'
// 同步action,就是指action的值为Object类型的一般对象
export const createIncrementAction = data => ({ type: INCREMENT, data })
export const createDecrementAction = data => ({ type: DECREMENT, data })
// 异步action,就是指action的值为函数，异步action中一般都会调用同步action，异步action不是必须要用的。
export const createIncrementAsyncAction = (data,time) => { 
    return (dispatch) => { 
        setTimeout(() => {
            dispatch(createIncrementAction(data))
        },time)
    } 
}

    redux异步编程理解：

    1. redux默认是不能进行异步处理的,
    2. 某些时候应用中需要在redux中执行异步任务(ajax, 定时器)

  9. redux不能直接处理异步action，需要下载redux-thunk插件进行处理，在store的legacy_createStore中传入作为第二个参数的函数applyMiddleware中

    npm i redux-thunk

    // store.js
import { applyMiddleware, legacy_createStore } from "redux";
// 引入为Count组件服务的reducer
import countReducer from './count_reducer'
// 引入redux-thunk,用于支持异步action
import thunk from 'redux-thunk'
// 暴露store
export default legacy_createStore(countReducer,applyMiddleware(thunk))

    处理异步action步骤:

    1. 安装redux-thunk，thunk配置在store中
    2. 创建action的函数不再返回一般对象，而是一个函数，该函数中写异步任务。
    3. 异步任务有结果后，分发一个同步的action去真正操作数据。
    4. 备注：异步action不是必须要写的，完全可以自己等待异步任务的结果了再去分发同步action。

    注意点：

    applyMiddleware() 作用：应用上基于redux的中间件(插件库)

2.react-redux的使用

1).react-redux理解

  1. 一个react插件库
  2. 专门用来简化react应用中使用redux

2).react-redux的工作流程

a.react-redux的原理图

b.react-redux将所有组件分成两大类
  1. UI组件
    1. 只负责 UI 的呈现，不带有任何业务逻辑
    2. 通过props接收数据(一般数据和函数)
    3. 不使用任何 Redux 的 API
    4. 一般保存在components文件夹下
  2. 容器组件
    1. 负责管理数据和业务逻辑，不负责UI的呈现
    2. 使用 Redux 的 API
    3. 一般保存在containers文件夹下

3).react-redux的使用

a.需求一

  1. 分别创建component和containers文件夹，并都文件夹中创建一个Count文件夹，分别用来编写UI组件和容器组件

    明确两个概念：

    1. UI组件：不能使用任何redux的api,只负责页面的呈现、交互等。
    2. 容器组件：负责和redux通信，将结果交给UI组件。

  2. 编写UI组件

    export default class Count extends Component {
    // 加法
    increment = () => {
        const { value } = this.seleteNumber;
    }
    // 减法
    decrement = () => {
        const { value } = this.seleteNumber;
    }
    // 当前求和为奇数再加
    incrementIfOdd = () => {
        const { value } = this.seleteNumber;
    }
    // 异步加
    incrementAsync = () => {
        const { value } = this.seleteNumber;
    }
    render() {
        return (
            <div>
                <h1>当前求和为:???</h1>
                <select ref={c => this.seleteNumber = c}>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>&nbsp;
                <button onClick={this.increment}>+</button>&nbsp;
                <button onClick={this.decrement}>-</button>&nbsp;
                <button onClick={this.incrementIfOdd}>当前求和为奇数再加</button>&nbsp;
                <button onClick={this.incrementAsync}>异步加</button>
            </div>
        )
    }
}

  3. 创建容器组件且关联UI组件

    1. 容器组件不用手动编写，通过react-redux编写

    2. 首先引入容器组件的“左右手”——UI组件和redux

      // 引入CountUI组件
import CountUI from '../../component/Count'
// 引入redux中的store
import store from '../../redux/store'

    3. 其次需要连接“左右手”——UI组件和redux，可以使用react-redux中的connect方法进行连接

      // 引入connect用于连接UI组件与redux
import { connect } from 'react-redux'
const CountContainer=connect()()

      connect函数的返回值仍然是一个函数，而CountContainer变量可以接收到一个容器组件，为了让CountContainer容器组件与CountUI组件建立联系，需要将CountUI传入到connect()()的第二个括号中

      const CountContainer=connect()(CountUI)

    4. 然后将容器组件进行暴露，并在App组件中进行引用

      export default connect()(CountUI)

      //App.js
import Count from './containers/Count'
export default class App extends Component {
  render() {
    return (
      <div>
        <Count/>
      </div>
    )
  }
}

    5. 最后需要连接“左右手”中的redux，也就是store

      容器组件中的store需要通过props进行传递，不能在容器组件中手动引入

      //App.js
import Count from './containers/Count'
import store from './redux/store'
export default class App extends Component {
  render() {
    return (
      <div>
        {/* 给容器组件传递store */}
        <Count store={store}/>
      </div>
    )
  }
}

  4. 容器组件向UI组件传递状态与操作状态的方法

    1. 容器组件与UI组件是父子组件，但是状态与操作状态的方法不能像其他父子组件一样通过给子组件添加属性的方式传递

    2. connect函数在第一次调用时，也就是connect()时需要传递两个值，并且两个值都要为function

      function a() {}
function b() {}
export default connect(a,b)(CountUI)

    3. a函数返回的对象中的key就作为传递给UI组件props的key，value就作为传递给UI组件props的value——状态

      function a() {
    return { count: 900 }
}

    4. b函数返回的对象中的key就作为传递给UI组件props的key，value就作为传递给UI组件props的value——操作状态的方法

      function b() {
    return {jia:(data) => { console.log(1); }}
}

    5. 容器组件在connect函数第一次执行后传递了a、b两个函数的返回值，即是状态和操作状态的方法

      export default class Count extends Component {
    render() {
        console.log('UI组件接收到到props',this.props);
        return (
            <div>
                <h1>当前求和为:???</h1>
                <select ref={c => this.seleteNumber = c}>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>&nbsp;
                <button onClick={this.increment}>+</button>&nbsp;
                <button onClick={this.decrement}>-</button>&nbsp;
                <button onClick={this.incrementIfOdd}>当前求和为奇数再加</button>&nbsp;
                <button onClick={this.incrementAsync}>异步加</button>
            </div>
        )
    }
}

    6. 容器组件可以向UI组件传递数值后，就需要向redux也就是store传递state和action

      1. 首先需要在a函数中拿到store中的state,也就是状态的数值，因为a函数是用来传递状态的，所以react-redux设计a函数会自动传入state，可以直接使用state取值

        function mapStateToProps(state) {
    return { count: state }
}

      2. 然后在b函数中通知redux执行加法，因为b函数是用来传递操作状态方法的，所以react-redux设计b函数会自动传入store，可以直接使用dispatch分发action对象

        function mapDispatchToProps(dispatch) {
    // 通知redux执行加法
    return {
        jia: number =>dispatch({type:'increment',data:number})
    }
}

      3. 通过引入已经编写好的action，避免在b函数中手动创造传递action对象

        // 引入action
import { createIncrementAction, createDecrementAction,createIncrementAsyncAction } from '../../redux/count_action'
function b(dispatch) {
    // 通知redux执行加法
    return {
        jia: number => dispatch(createIncrementAction(number)),
        jian: number => dispatch(createDecrementAction(number)),
        jianAsync:(number,time) => dispatch(createIncrementAsyncAction(number,time))
    }
}

    7. 整理容器组件代码

      // 引入CountUI组件
import CountUI from '../../component/Count'
// 引入action
import { createIncrementAction, createDecrementAction,createIncrementAsyncAction } from '../../redux/count_action'
// 引入connect用于连接UI组件与redux
import { connect } from 'react-redux'
function mapStateToProps(state) {
    return { count: state }
}
function mapDispatchToProps(dispatch) {
    // 通知redux执行加法
    return {
        jia: number =>dispatch(createIncrementAction(number)),
        jian: number => dispatch(createDecrementAction(number)),
        jianAsync:(number,time) => dispatch(createIncrementAsyncAction(number,time))
    }
}
// 使用connect()()创建并暴露一个Count的容器组件
export default connect(mapStateToProps, mapDispatchToProps)(CountUI)

      注意点：

      1. mapStateToProps函数返回的是一个对象；
      2. 返回的对象中的key就作为传递给UI组件props的key,value就作为传递给UI组件props的value
      3. mapStateToProps.用于传递状态
      1. mapDispatchToProps函数返回的是一个对象；
      2. 返回的对象中的key就作为传递给UI组件props的key,value.就作为传递给UI组件props的value
      3. mapDispatchToProps.用于传递操作状态的方法

    8. 在UI组件读取状态的数值和调用操作状态的方法

      export default class Count extends Component {
    state = {
        count: 0
    }
    // 加法
    increment = () => {
        const { value } = this.seleteNumber;
        this.props.jia(+value)
    }
    // 减法
    decrement = () => {
        const { value } = this.seleteNumber;
        this.props.jian(+value)
    }
    // 当前求和为奇数再加
    incrementIfOdd = () => {
        const { value } = this.seleteNumber;
        if (this.props.count!==2) {
            this.props.jia(+value)
        }
    }
    // 异步加
    incrementAsync = () => {
        const { value } = this.seleteNumber;
        this.props.jianAsync(+value,500)
    }
    render() {
        console.log('UI组件接收到到props',this.props);
        return (
            <div>
                <h1>当前求和为:{this.props.count}</h1>
                <select ref={c => this.seleteNumber = c}>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>&nbsp;
                <button onClick={this.increment}>+</button>&nbsp;
                <button onClick={this.decrement}>-</button>&nbsp;
                <button onClick={this.incrementIfOdd}>当前求和为奇数再加</button>&nbsp;
                <button onClick={this.incrementAsync}>异步加</button>
            </div>
        )
    }
}

  5. 简写容器组件

    1. 将mapStateToProps函数和mapDispatchToProps函数简写到connect函数中

      export default connect(
    state => ({ count: state }),
    dispatch => ({
        jia: number => dispatch(createIncrementAction(number)),
        jian: number => dispatch(createDecrementAction(number)),
        jianAsync: (number, time) => dispatch(createIncrementAsyncAction(number, time))
    })
)(CountUI)

    2. 在react-redux底层判断中只要传递的mapDispatchToProps是一个对象，那么就会自动dispatch 。

    3. 给UI组件传递操作状态的方法就是传递其对应的atcion， 只需要调用操作状态的方法的时候准备好action对象，react-redux就会自动分发dispatch

    export default connect(
    state => ({ count: state }),
    {
        jia: createIncrementAction,
        jian: createDecrementAction,
        jianAsync: createIncrementAsyncAction
    }
)(CountUI)

  6. 将容器组件和UI组件整合到一个文件

    import React, { Component } from 'react'
// 引入action
import { createIncrementAction, createDecrementAction, createIncrementAsyncAction } from '../../redux/count_action'
// 引入connect用于连接UI组件与redux
import { connect } from 'react-redux'
class Count extends Component {
    // 加法
    increment = () => {
        const { value } = this.seleteNumber;
        this.props.jia(+value)
    }
    // 减法
    decrement = () => {
        const { value } = this.seleteNumber;
        this.props.jian(+value)
    }
    // 当前求和为奇数再加
    incrementIfOdd = () => {
        const { value } = this.seleteNumber;
        if (this.props.count % 2 !== 0) {
            this.props.jia(+value)
        }
    }
    // 异步加
    incrementAsync = () => {
        const { value } = this.seleteNumber;
        this.props.jianAsync(+value, 500)
    }
    render() {
        return (
            <div>
                <h1>当前求和为:{this.props.count}</h1>
                <select ref={c => this.seleteNumber = c}>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>&nbsp;
                <button onClick={this.increment}>+</button>&nbsp;
                <button onClick={this.decrement}>-</button>&nbsp;
                <button onClick={this.incrementIfOdd}>当前求和为奇数再加</button>&nbsp;
                <button onClick={this.incrementAsync}>异步加</button>
            </div>
        )
    }
}
export default connect(
    state => ({ count: state }),
    {
        jia: createIncrementAction,
        jian: createDecrementAction,
        jianAsync: createIncrementAsyncAction
    }
)(Count)

  7. 使用Provider组件优化index.js

    import {Provider} from 'react-redux'
// Provider组件会给整个应用需要用到store的容器组件传递store
createRoot(document.getElementById('root')).render(<Provider store={store}><App /></Provider>)
    1. 无需自己给容器组件传递store，给<App/>包裹一个<Provider store:={store}>即可。
    2. 使用了react-redux后也不用再自己检测redux中状态的改变了，容器组件可以自动完成这个工作。
b.需求二

  1. 在containers文件夹分别创建名为Count和Person的文件夹存放两个组件的文件（容器组件+UI组件），在redux文件夹中创建action和reducer文件夹分别创建Count和Person组件相关的action和reducer文件

  2. 完成person组件的action文件

    // redux/action/person.js
import { ADD_PERSON } from '../constant'
// 创建增加一个人的action动作对象
export const createAddPersonAction = personObj => ({ type: ADD_PERSON, data: personObj })

  3. 完成person组件的reducer文件

    // redux/reducer/person.js
import { ADD_PERSON } from '../constant'
const initState = [{ id: '001', name: 'tome', age: 18 }]
export default function personReducer(preState = initState, action) {
    console.log('personReducer执行了');
    const { type, data } = action
    switch (type) {
        case ADD_PERSON:
            return [data, ...preState];
        default:
            return preState;
    }
}

    关于这里使用[data, …preState]而不使用push、unshift等JS数组的方法的原因：personReducer必须要为一个纯函数

  4. 在store文件中引入为Person组件服务的reducer

    import { applyMiddleware, legacy_createStore ,combineReducers} from "redux";
// 引入为Count组件服务的reducer
import countReducer from './reducer/count'
// 引入为Person组件服务的reducer
import personReducer from './reducer/person'
// 引入redux-thunk,用于支持异步action
import thunk from 'redux-thunk'
// 暴露store
export default legacy_createStore(countReducer,applyMiddleware(thunk))

    因为legacy_createStore函数只能传入两个参数，而第二个参数已经固定为applyMiddleware(thunk)，所以需要将为两个组件服务的reducer集合在一个总reducer，然后传给legacy_createStore函数

    // 引入applyMiddleware
import { applyMiddleware, legacy_createStore ,combineReducers} from "redux";
// 引入为Count组件服务的reducer
import countReducer from './reducer/count'
// 引入为Person组件服务的reducer
import personReducer from './reducer/person'
// 引入redux-thunk,用于支持异步action
import thunk from 'redux-thunk'
//  传入combineReducers中的对象是redux保存的总状态对象                              
const allReducer=combineReducers({
    he:countReducer,
    rens:personReducer
})
// 暴露store
export default legacy_createStore(allReducer,applyMiddleware(thunk))

  5. 完成person组件的整合组件文件

    //	containers/Person/index.js
import React, { Component } from 'react'
import { nanoid } from 'nanoid'
import { connect } from 'react-redux'
import { createAddPersonAction } from '../../redux/action/person'
class Person extends Component {
  addPerson = () => {
    const name = this.nameNode.value
    const age = +this.ageNode.value
    //  console.log(name,age);
    const personObj = { id: nanoid(), name, age }
    console.log(personObj);
    this.props.jiaren(personObj)
    this.nameNode.value = ''
    this.ageNode.value = ''
  }
  render() {
    return (
      <div>
        <h1>我是Person组件</h1>
        <h2>上方的组件求和为{this.props.he}</h2>
        <input ref={c => this.nameNode = c} type="text" placeholder='请输入名字' />
        <input ref={c => this.ageNode = c} type="text" placeholder='请输入年龄' />
        <button onClick={this.addPerson}>添加</button>
        <ul>
          {
            this.props.ren.map((ren) => {
              return (<li key={ren.id}>名字{ren.name}——年龄{ren.age}</li>)
            })
          }
        </ul>
      </div>
    )
  }
}
export default connect(
  state => ({ ren: state.rens,he:state.he }),
  {
    jiaren: createAddPersonAction
  }
)(Person)

  6. 将所有组件的reducer集中在一个文件中引入并暴露

    1. 在redux文件夹下的reducer文件夹中创建一个index.js文件，专门用于汇总所有的reducer为一个总的reducer

      // 引入combineReducers,用于汇总多个reducer
import { combineReducers } from 'redux'
// 引入为Count组件服务的reducer
import count from './count'
// 引入为Count组件服务的reducer
import persons from './person'
//  传入combineReducers中的对象是redux保存的总状态对象                              
export default combineReducers({
    count,
    persons
})

    2. 在redux文件夹下的store.js文件里引入总reducer

      // 引入汇总之后的reducer
import reducer from "./reducer"

3.redux开发者工具

1).使用准备：

  1. 安装浏览器插件

  2. 下载工具依赖包

    npm install --save-dev redux-devtools-extension

  3. store中进行配置

    import {composewithDevTools}from 'redux-devtools-extension'
const store createStore(allReducer,composewithDevTools(applyMiddleware(thunk)))

2).使用效果：

海绵不信
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
create-react-redux-app：基于create-react-app的React样板
02-05
创建React Redux应用 该项目是通过。 该项目包括额外的redux软件包和改进的文件结构。...git clone [email protected]:YUzhva/create-react-redux-app.git NEW_PROJECT_NAME # with HTTPS git clone https://g
create-react-app中使用redux，react-redux
qq_22936647的博客
02-07 1325
1，index.js import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import { createStore } from 'redux' import { Provider } from 'react-redux' import reducer from './ind...
redux与react-redux简述
路漫漫其修远兮~
10-24 772
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 前言 一、pandas是什么？ 二、使用步骤 1.引入库 2.读入数据 总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分
React中使用Redux、React-redux
张晓健的博客
03-13 177
上一章配置完React 中v6路由的抽离使用，那么在项目开发中需要统一管理数据，vue中使用的是vuex，而React 中使用的是 Redux(并不是react官方提供的库),react-redux，下面就将路由，redux,react-redux 来结合起来使用。这时候store定义的数据就传过来了，因为我没写数据，所以数组为0，这时候就可以store来统一对数据的管理。redux和组件进行对接的时候是直接在组件中进行创建。里的数据，还要使用connect将组件和react连接。这时候会有一个问题，
【react】create-react-app配置redux
weixin_42582523的博客
12-04 859
一、安装 npm i redux react-redux -s 二、初始化store 1. 在index.js中引入redux中的createStore import {createStore} from 'redux'; 2. 在index.js中使用createStore创建store const store = createStore(/* 后面加入 */) 3. 在src中创建reducers（减速器）文件夹，并创建rootReducer.js文件 4. 在rootRedu
redux和react-redux
weixin_60508127的博客
03-18 912
（3）昨天学了redux，今天以登录案例再打了一遍，笔记做好，先来张图 （2）布局配置：actions文件夹负责所有的action.js，reducers文件夹负责所有的reducer.js ） （3）定义一个contant.js,该模块是用于定义action对象中type类型的常量值 (4) 在actions里面定义专门为Login组件生成action对象:目的只有一个，便于管理的同时防止程序员单词写错 import {USER_TOKEN} from '../contant' //同
create-react-app-with-redux：：star2：简单的redux实现已添加到使用create-react-app创建的应用程序中
02-05
使用Redux create-react-app ... 这是Redux的一个准系统实现，该React是使用create-react-app生成的React应用create-react-app ，然后使用npm run eject 。 :light_bulb: 该存储库包含两个提交，并且只有两个提交。 ...
typescript-react-redux-ie8:Typescript-react-redux-ie8，在线演示
05-11
我在项目中写3个DEMO：todomvc without immutabeljs (ts + react + redux)[todo] todomvc with immutablejs (ts + react+ redux + immutablejs)[todo] hackernews (ts + react + redux + immutablejs)使用时，只需要...
react-intl-redux：React Intl的Redux绑定
02-05
React国际Redux 绑定。 通过在商店中存储翻译并调度动作来更新它来构建惯用的React Redux应用程序。 安装 npm install react-intl-redux react react-intl react-redux redux --save 用法 import React from '...
reactjs-react-redux
05-13
React Redux 官方React绑定。 高效且灵活。 安装 ... 如果您在React Native上使用React Redux 5.x遇到任何问题，请运行npm ls react并确保您的node_modules没有重复的React安装。 我们建议您使用npm@
【React】React的懒加载组件lazy和Suspense
fangyuan__的博客
05-13 251
在一个多路由项目中，页面加载时，所有的路由组件都会被加载如果我们有很多个路由组件，但是用户只点击了几个，这就会有很大的消耗，因此我们需要做懒加载处理，我们点击哪个时，才去加载哪一个而React当然想到了这一点，给我们提供了LazyLoad。
Django5+React18前后端分离开发实战02 安装Python和Django
Python私教
05-17 693
注意：这里我选择使用Python3.11 + Django5，如果有不会安装的同学，去看到搭建Anaconda环境的那篇文章。
「React」useEffect 与 useLayoutEffect 使用与区别
Constantiny的博客
05-17 620
useEffect 与 useLayoutEffect 是两个 Hooks，前者比较常用，后者在一些场景下也会用到，下面说明两者区别和应用场景。
React18
m0_71534259的博客
05-16 1286
/ 封装自定义Hook// 问题: 布尔切换的逻辑 当前组件耦合在一起的 不方便复用// 解决思路: 自定义hook// 可复用的逻辑代码value)// 哪些状态和回调函数需要在其他组件中使用 returnreturn {value,toggle// 封装自定义hook通用思路// 1. 声明一个以use打头的函数// 2. 在函数体内封装可复用的逻辑（只要是可复用的逻辑）// 3. 把组件中用到的状态或者回调return出去（以对象或者数组）
React 中的组件提升和 Context 的使用方式
hawk2014bj的博客
05-18 248
在项目的开发中，何时使用状态提升，何时使用上下文，我们需要根据具体需求，以及组件的复杂性。当只有少数几个组件需要访问状态，并且这些组件关系密切（如父子或兄弟组件）时使用。保持数据流简单和明确，使得追踪和调试数据流通过组件的方式更加容易。状态提升的好处是简单、方便，但是需要层层传递，如果结构复杂就显得比较混乱。对应使用上下文，可以应用在以下几种场景当状态需要被应用内不同层级的许多组件访问时。用于可以被视为“全局”的数据，如主题、用户设置、身份验证数据等。
【React】如何让函数式组件也能使用state——useState（Hooks）
fangyuan__的博客
05-15 228
但是React官方提供了一个Hooks叫useState，它解决了函数式组件和类式组件的差异，让函数式组件拥有了类式组件所拥有的 state ，同时新增了一些 API ，让函数式组件，变得更加的灵活。count 是初始化的值，而 setCount 就像是一个 action 对象驱动状态更新，我们可以通过 setCount 来更新 count 的值。这里利用了useState，让函数式组件能够维护自己的 state ，它接收一个参数，作为初始化 state 的值，赋值给 count。
react 下拉框内容回显
最新发布
hyy的博客
05-20 72
/可以拿到faqType为0 但是却没有回显出下拉框的内容 我需要faqType为0 回显出下拉框内容为对应的label<Form}}<Form.Itemlabel='问题类型'rules={[{ required: true, message: '请输入问题类型' }]}<Select}}allowClearshowSearchplaceholder='请输入问题类型'options={[{ value: 0, label: '如何使用' },
React: memo
卡卡西：一个擅长拷贝的前端程序员
05-14 524
React.memo 允许组件在 props 没有改变的情况下跳过重新渲染。
速成react篇一：如何创建和嵌套组件，如何添加标签和样式，如何显示数据，如何渲染条件和列表，如何对事件做出响应并更新界面
qq_65537235的博客
05-13 564
第二，使用了es6的导出语法在外组件的时候。这里补充一个知识点，因为react大部分时候都会使用jsx或者tsx进行开发，使用它们的原因是因为他方便，并且严格，方便是可以在js中写dom和js代码，严格是必须用闭合标签，并且你的组件也不能返回多个 JSX 标签。以这个例子，我们要知道，在js中写dom的方式是 return （），在（）里面写dom，如果编写的dom只有一行，则可以在return后面 空格紧跟 不用括号包起来，但是仅限于只有一行代码的情况，如果有多行或者换行如下例子这种，必须包在括号里面。
react项目中使用React-Redux多还是Redux多
03-27
这取决于具体的项目需求和架构设计。 React-Redux是Redux官方推荐的React绑定库，它提供了一些方便的API和...综上所述，使用React-Redux还是Redux更多取决于具体的项目需求和架构设计，需要根据实际情况进行选择。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值