## 1.求和案例_redux精简版
(1).去除Count组件自身的状态
(2).src下建立:
-redux
-store.js
-count_reducer.js
(3).store.js：
1).引入redux中的createStore函数，创建一个store
2).createStore调用时要传入一个为其服务的reducer
3).记得暴露store对象
(4).count_reducer.js：
1).reducer的本质是一个函数，接收：preState,action，返回加工后的状态
2).reducer有两个作用：初始化状态，加工状态
3).reducer被第一次调用时，是store自动触发的，
传递的preState是undefined,
传递的action是:{type:'@@REDUX/INIT_a.2.b.4}
(5).在index.js中监测store中状态的改变，一旦发生改变重新渲染<App/>
备注：redux只负责管理状态，至于状态的改变驱动着页面的展示，要靠我们自己写。
## 2.求和案例_redux完整版
新增文件：
1.count_action.js 专门用于创建action对象
2.constant.js 放置容易写错的type值
## 3.求和案例_redux异步action版
(1).明确：延迟的动作不想交给组件自身，想交给action
(2).何时需要异步action：想要对状态进行操作，但是具体的数据靠异步任务返回。
(3).具体编码：
1).yarn add redux-thunk，并配置在store中
2).创建action的函数不再返回一般对象，而是一个函数，该函数中写异步任务。
3).异步任务有结果后，分发一个同步的action去真正操作数据。
(4).备注：异步action不是必须要写的，完全可以自己等待异步任务的结果了再去分发同步action。
## 4.求和案例_react-redux基本使用
(1).明确两个概念：
1).UI组件:不能使用任何redux的api，只负责页面的呈现、交互等。
2).容器组件：负责和redux通信，将结果交给UI组件。
(2).如何创建一个容器组件————靠react-redux 的 connect函数
connect(mapStateToProps,mapDispatchToProps)(UI组件)
-mapStateToProps:映射状态，返回值是一个对象
-mapDispatchToProps:映射操作状态的方法，返回值是一个对象
(3).备注1：容器组件中的store是靠props传进去的，而不是在容器组件中直接引入
(4).备注2：mapDispatchToProps，也可以是一个对象
## 5.求和案例_react-redux优化
(1).容器组件和UI组件整合一个文件
(2).无需自己给容器组件传递store，给<App/>包裹一个<Provider store={store}>即可。
(3).使用了react-redux后也不用再自己检测redux中状态的改变了，容器组件可以自动完成这个工作。
(4).mapDispatchToProps也可以简单的写成一个对象
(5).一个组件要和redux“打交道”要经过哪几步？
(1).定义好UI组件---不暴露
(2).引入connect生成一个容器组件，并暴露，写法如下：
connect(
state => ({key:value}), //映射状态
{key:xxxxxAction} //映射操作状态的方法
)(UI组件)
(4).在UI组件中通过this.props.xxxxxxx读取和操作状态
## 6.求和案例_react-redux数据共享版
(1).定义一个Pserson组件，和Count组件通过redux共享数据。
(2).为Person组件编写：reducer、action，配置constant常量。
(3).重点：Person的reducer和Count的Reducer要使用combineReducers进行合并，
合并后的总状态是一个对象！！！
(4).交给store的是总reducer，最后注意在组件中取出状态的时候，记得“取到位”。
## 7.求和案例_react-redux开发者工具的使用
(1).yarn add redux-devtools-extension
(2).store中进行配置
import {composeWithDevTools} from 'redux-devtools-extension'
const store = createStore(allReducer,composeWithDevTools(applyMiddleware(thunk)))
## 8.求和案例_react-redux最终版
(1).所有变量名字要规范，尽量触发对象的简写形式。
(2).reducers文件夹中，编写index.js专门用于汇总并暴露所有的reducer
React全家桶(技术栈) redux 代码
需积分: 0 110 浏览量
更新于2023-03-29
收藏 386KB ZIP 举报
React全家桶，或者说React技术栈，是用于构建大型复杂Web应用的一系列工具和技术的集合。这个标签涵盖了React库本身，以及与其紧密相关的Redux状态管理库，还有其他辅助工具，如React Router用于页面路由，Redux Thunk或Redux Saga用于异步操作处理，以及Webpack或Create React App这样的构建工具。在描述中提到的"redux 代码"，暗示了重点是关于如何在React应用中集成和使用Redux。
React是一个由Facebook开发的开源JavaScript库，主要用于构建用户界面，特别是单页应用。它采用了组件化开发模式，允许开发者将UI拆分为独立、可复用的组件，每个组件都有自己的状态和生命周期方法。React通过虚拟DOM（Document Object Model）来提高性能，减少了对实际DOM的直接操作。
Redux则是一个用于管理应用程序状态的轻量级库，尤其适用于大型应用。它遵循单一数据源原则，整个应用的状态被保存在一个全局store中。Redux通过一系列称为actions的事件来改变状态，并通过reducers来纯函数式地更新状态。Redux DevTools是一个强大的调试工具，可以实时追踪和记录应用的状态变化。
Redux与React结合使用时，通常会借助于`react-redux`库，它提供了`Provider`组件和`connect`函数，使得React组件能够便捷地访问Redux store中的数据，并触发actions。`Provider`包裹整个React应用，使得任何组件都可以通过`useContext`或`connect`获取store；而`connect`函数用于高阶组件，它可以自动订阅store的变化，将数据注入到React组件的props中。
在Redux_test文件中，可能包含的有Redux的配置文件、actions定义、reducers实现、以及与React组件连接的代码片段。例如，一个典型的action可能是增加购物车商品数量，其定义可能如下：
```javascript
export const addToCart = (itemId, quantity) => ({
type: 'ADD_TO_CART',
payload: { itemId, quantity },
});
```
对应的reducer可能会这样处理这个action：
```javascript
const initialState = { cart: [] };
const cartReducer = (state = initialState, action) => {
switch (action.type) {
case 'ADD_TO_CART':
return {
...state,
cart: state.cart.concat(action.payload),
};
default:
return state;
}
};
```
`connect`函数会把actions和store绑定到React组件上：
```javascript
import { connect } from 'react-redux';
import { addToCart } from './actions';
const CartButton = ({ itemId, quantity, addToCart }) => (
<button onClick={() => addToCart(itemId, quantity)}>Add to Cart</button>
);
const mapStateToProps = state => ({});
const mapDispatchToProps = dispatch => ({
addToCart: (itemId, quantity) => dispatch(addToCart(itemId, quantity)),
});
export default connect(
mapStateToProps,
mapDispatchToProps
)(CartButton);
```
以上就是React全家桶中的Redux部分，包括其基本概念、如何与React结合使用，以及可能在Redux_test文件中看到的代码结构。学习并熟练掌握这些技术，将有助于构建高效且易于维护的React应用。
redux_test.zip （93个子文件） 
redux_test 
debug.log 288B yarn.lock 503KB 4_src_异步action版 App.jsx 202B components Count index.jsx 2KB index.js 265B redux constant.js 219B store.js 466B count_reducer.js 684B count_action.js 616B 9_src_最终版 App.jsx 335B containers Count index.jsx 2KB Person index.jsx 1KB index.js 372B redux constant.js 259B store.js 563B actions count.js 569B person.js 160B reducers count.js 697B index.js 416B person.js 521B 1_src_纯react版 App.jsx 202B components Count index.jsx 1KB index.js 143B src App.jsx 335B containers Count index.jsx 2KB Person index.jsx 1KB index.js 372B redux constant.js 259B store.js 563B actions count.js 569B person.js 160B reducers count.js 697B index.js 416B person.js 521B 3_src_redux完整版 App.jsx 202B components Count index.jsx 2KB index.js 265B redux constant.js 219B store.js 346B count_reducer.js 684B count_action.js 249B 2_src_redux精简版 App.jsx 202B components Count index.jsx 1KB index.js 265B redux store.js 346B count_reducer.js 640B 8_src_react-redux_开发者工具 App.jsx 270B containers Count index.jsx 2KB Person index.jsx 1KB index.js 266B redux constant.js 259B store.js 823B actions count.js 617B person.js 172B reducers count.js 697B person.js 521B 5_src_react-redux的基本使用 App.jsx 292B containers Count index.jsx 1KB components Count index.jsx 1KB index.js 363B redux constant.js 219B store.js 466B count_reducer.js 684B count_action.js 616B package.json 963B public 
index.html 147B build asset-manifest.json 683B index.html 2KB static js main.d1379770.chunk.js 4KB 2.41776c9b.chunk.js.map 441KB main.d1379770.chunk.js.map 10KB runtime-main.baabbbc4.js.map 8KB
2.41776c9b.chunk.js.LICENSE.txt 1KB 2.41776c9b.chunk.js 152KB runtime-main.baabbbc4.js 2KB 7_src_react-redux_数据共享版 App.jsx 270B containers Count index.jsx 2KB Person index.jsx 1KB index.js 266B redux constant.js 259B store.js 705B actions count.js 617B person.js 172B reducers count.js 697B person.js 385B README.md 4KB 6_src_react-redux优化 App.jsx 202B containers Count index.jsx 2KB index.js 266B redux constant.js 219B store.js 466B count_reducer.js 684B count_action.js 616B2019-08-15 上传
2021-04-27 上传
2021-05-11 上传
185 浏览量
2021-05-11 上传
122 浏览量
156 浏览量
5星 · 资源好评率100%2021-05-25 上传
189 浏览量
121 浏览量
5星 · 资源好评率100% 5星 · 资源好评率100%109 浏览量
2024-06-04 上传
187 浏览量
2024-03-09 上传
5星 · 资源好评率100%162 浏览量
139 浏览量
152 浏览量
5星 · 资源好评率100% 5星 · 资源好评率100%资源评论
qq_繁华
- 粉丝: 32
- 资源: 9
最新资源
- SA213-TP310HCbN钢采用镍基焊丝ERNiCrCoMo-1焊接工艺探讨 - .pdf
- SA213-T91钢小管低温环境下的焊接工艺 - .pdf
- SA-335P91钢的焊接工艺探讨.pdf
- SA—335P91钢的焊接工艺试验研究.pdf
- SA335P91钢焊接工艺研究.pdf
- SA335P91集箱焊接工艺的改良.pdf
- SA-335P91耐热钢的焊接性试验研究.pdf
- SA387Gr．22C1．2钢在产品中的焊接.pdf
- SA904L钢板焊接工艺探讨.pdf
- SA-724MGrB层板的焊接工艺评定.pdf
- SA516-70+SA240-TP316L不锈复合钢板的焊接.pdf
- SA516 Cr60厚板塔器焊接.pdf
- SA516-Gr70钢焊接接头低温断裂阻力研究.pdf
- SAF2507超级双相不锈钢焊接技术研究现状.pdf
- SAF2205双相不锈钢焊接换热管热处理工艺及设备改进.pdf
- SAF2507与Q235钢异种金属焊接接头组织研究.pdf
