# react-redux

**Repository Path**: weiyao11/react-redux

## Basic Information

- **Project Name**: react-redux
- **Description**: 学习react的公共管理工具 redux 、react-redux 、以及redux浏览器插件
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2021-07-08
- **Last Updated**: 2024-02-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

#### 求和案例 _redux 精简版
    (1).去除Count组件自身的状态τ
    (2).src下建立:
        - 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
    (5).在index. js中检测store中状态的改变，一旦发 生改变重新渲染`<App/>`
        
        备注: redux只负责管理状态，至于状态的改变驱动着页面的展示，要靠我们自己写。


#### 求和案例 _redux 完整版
     
     新增文件
        1. count_action.js 专门用于创建action对象
        2. constant.js 放置由于编码疏忽写错action的type值

#### 求和案例 _redux 异步版

    (1).明确:延迟的动作不想交给组件自身，想交给action
    (2).何时需要异步action:想要对状态进行操作，但是具体的数据靠异步任务返回。
    (3).具体编码:
        1).yarn add redux-thunk,并配置在store中
        ```js
        import { createStore,applyMiddleware } from 'redux'

        import countReducer from './count_reducer';
        
        import thunk from 'redux-thunk';

        const store = createStore(countReducer,applyMiddleware(thunk))

        export default 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). 备注:容器组件中的store是靠props传进去的，而不是在容器组件中直接引入

```js
/*
此处需要用Provider包裹App，目的是让App所有的后代容器组件都能接收到store 

*/

    ReactDOM.render(
    <Provider store ={store}>
        <App />
    </Provider>,
    document.getElementById('root'));
```
#### 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.xxxxxx读取和操作状态



#### 求和案例 _react-redux开发者工具的使用

    (1). `yarn add redux-devtools-extension`
    (2). store中进行配置
```js
        import { composeWithDevTools} from 'redux-devtools-extension '
        const store = createStore(allReducer , composeWithDevTools(applyMiddleware(thunk)))
```

####  求和案例_ react-redux最终 版

    (1). 所有变量名字要规范，尽量触发对象的简写形式。
    (2). reducers文件夹中，编写index.js专门用于汇总并暴露所有的reducer