redux, react-redux 及使用案例演示 React

文章目录

redux 和 react-redux

redux核心概念

state 对象
action 对象
store 对象

redux 三大原则
react-redux
redux 和 react-redux 案例代码如下

redux 和 react-redux

Redux 是一个独立的JavaScript 状态管理库, 并非是 React 内容之一
redux中文文档官网

redux核心概念

理解redux的几个核心概念以及它们之间的关系

1. state 2. reducer 3. store 4. action

state 对象

通常我们会把应用中的数据存储到一个对象树(Object Tree)中进行统一管理, 我们把这个对象树称为 : state

state 是只读的

我们需要注意的是, redux中, 为了保证数据状态的可维护和测试性, redux不允许直接修改 state 中的原始数据, 而是通过返回一个新的对象的方式处理.

通过纯函数修改state

什么是纯函数?

#1. 纯函数 1. 相同的输入永远返回相同的输出 2. 不修改函数的输入值 3. 不依赖外部环境状态 4. 无任何副作用 #2. 使用纯函数的好处 1. 便于测试 2. 有利于重构

action 对象

我们对 state 的修改是通过 reducer 纯函数来进行的, 同时传入的 action 来执行具体的操作, action 是一个对象, 该对象中包含了一些常用属性.

#1. action 对象的属性 - type属性: 表示要进行操作的动作类型, 比如增删改查... - payload属性: 操作state的同时传入的数据参数# 但是需要注意的是, 我们不直接去调用 Reducer 函数, 而是通过 Store 对象提供的 dispatch 方法来调用 reducer 纯函数.

store 对象

为了对 state, Reducer 和 action 进行统一管理和维护, 我们需要创建一个 Store 对象.

redux 三大原则

单一数据源: 整个应用的 state 被存储在一个 Object tree 中, 并且这个 Object tree 只存在于唯一一个 store中

State 是只读的: 唯一改变 state 的方法就是触发 action , action 是一个用于描述已发生事件的普通对象.

使用纯函数来执行修改操作.

react-redux

注意: 即便我们使用react-redux . 英文官方文档中仍然说明: 我们仍然需要安装 redux 来创建一个 store, 我们只是在 react 项目中借助 react-redux 提供的 API 更加方便应用而已. 所以 redux 和 react-redux 这两个库是结合使用的.
因为 redux 是一个独立的集中式管理状态数据的库, 我们平常在 React 项目中使用的时候, Redux 官方也提供了一个React 绑定库是react-redux , 我们通常会结合这个官方推荐的绑定库一起使用.

react-redux 库中核心 API

connect()

redux 和 react-redux 案例代码如下

src/index.js

import React from 'react'; import ReactDOM from 'react-dom'; import {Provider} from 'react-redux' import App from './App'; import store from './redux/index'ReactDOM.render( , document.getElementById('root') );

src/App.js

import React,{Fragment} from 'react' import Child from './Child' function App(props) { console.log('App组件中的属性props -->',props); return( 我是App件哦!! ) } export default App

src/Child.js

import React,{Fragment} from 'react' import {connect} from 'react-redux' function Child(props) { console.log('Child子组件 -->>',props); const {dispatch,num} = props return ( Hello,我是Child组件哦! num值为:{num} ) } // 这里参数的 state 是 redux 的store 里返回的state export default connect((state,props)=>{ // 这里 return 回的state 会注入到当前包装组件的 props 中. return { ...state, ...props } })(Child)

【redux, react-redux 及使用案例演示】src/redux/index.js

import {createStore} from 'redux'function reducer(state={num:1},action) { console.log('reducer的初次执行-->>',state,action); switch (action.type) { case 'ADD': return { ...state, num: state.num+1, payload: action.payload } } return state } const store = createStore(reducer); export default store