# react-redux-counter

**Repository Path**: duans/react-redux-counter

## Basic Information

- **Project Name**: react-redux-counter
- **Description**: 一个使用redux实现计数器的小案例, 目的是演示redux的使用
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2019-07-14
- **Last Updated**: 2022-06-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# redux使用介绍
> redux是一个状态管理工具, 不仅局限于在react中使用, 也可以在vue或者其他框架使用, 甚至于可以脱离框架来使用, 使用起来是相对来说还是比较麻烦的. 只不过跟react配合使用的最多.
对于一些业务功能简单的项目来说, 使用redux反而会让代码更复杂.
## 在react中使用redux进行状态管理
- 安装依赖: `yarn add redux react-redux -S` 
    >  其中`react-redux`是将`react`和`redux`结合起来的一个中间角色,因为`redux`本身使用起来还是比较麻烦的,
当然不借助`react-redux`也可以在`react`项目中使用`redux`来进行状态管理, 只不过数据的更新和获取需要手动来调用相对应的方法来维护.使用`react-redux`可以简化这一系列操作. 

## 计数器案例

- 接下来将使用`redux`来实现一个计数器案例, 当然仅仅是为了演示`react`中如何使用`redux`(因为这个案例的逻辑太过于简单, 所以使用`redux`反而会使代码变得更加复杂).

### 项目结构搭建

![项目结构](media/counter-react-redux.png)

### redux核心文件

- src/redux/action-types.js
    > 定义状态更新的一些常量

    ```js
    export const INCREMENT='increment';
    export const DECREMENT='decrement';
    ```

- src/redux/actions.js
    > 状态数据更新规则
    ```js
    // 导入更新规则需要的type属性的常量值
    import {INCREMENT,DECREMENT} from './action-types.js'
    // 增加计数器的规则
    export (number)=>({type:INCREMENT,data:number});
    export (number)=>({type:decrement,data:number});
    ```

- `src/redux/reducer.js`
    - `combineReducers`方法合并多个`reducer`
    > 状态更新函数
    ```js
    // 导入状态更新需要的常量
    import {INCREMENT,DECREMENT} from './action-types'
    // 导入combineReducers方法合并reducer
    import {combineReducers} from 'redux'
    function count(state=1,action){
        switch(action.type){
            case INCREMENT:
                return state+action.number;
            case DECREMENT:
                return state-action.number;
            default 
            return state;
        }   
    }
    // 初始化user
    const userInit={name:'zs',gender:'女'}
    function user(state=userInit,action){
        switch(action.type){
            default:
            return state;
        }
    }
    // 导出合并以后的reducer对象
    export default combineReducers({
        count,user
    });
    ```
- src/redux/store.js: 创建store存储对象
    ```js
    // 导入createStore方法;用来创建store状态存储对象
    impor {createStore} from 'redux';
    // 导入reducer
    import reducer from './reducer'
    export default createStore(reducer)
    ```

### UI(视图)组件
- `src/components/Counter.jsx`

    ```jsx
    // 导入react 
    import React from 'react';
    // 导入prop-types类型约束
    import 'PropTypes' from 'prop-types';
    
    export default class Counter extends React.Component{
        static PropTypes={
            count:PropTypes.number.isRequired,
            increment:PropTypes.func.isRequired,
            decrement:PropTypes.func.isRequired,
        }
    
        constructor(props){
            super(props);   
        }
    
        increment(){
            const step=this.refs.step;
            this.props.increment(step);
        }
    
        decrement(){
            const step=this.refs.step;
            this.props.decrement(step);
        }
        render(){
            return <div>
                <span>计数器: {this.props.count}</span>
                &nbsp;&nbsp;
                <select ref="step">
                    <option value='1'>1</option>
                    <option value='2'>2</option>
                    <option value='3'>3</option>
                </select>
                &nbsp;&nbsp;
                <button onClick={()=>{this.increment()}}>增加</button>
                &nbsp;&nbsp;
                <button onClick={()=>{this.decrement()}}>减少</button>
            </div>
        }
    }
    
    ```

### 容器组件
- src/containers/CounterContainer.js

    ```js
    // 导入Counter视图组件
    import Counter from '../components/Counter';
    // 导入connect方法
    import connect from 'react-redux';
    // 导入acitons
    import {increment,decrement} from '../redux/actions'

    // 简洁写法(不容易理解)

    export default connect(
        (state)=>({count:state.count}),
        {increment,decrement}
    )(Counter)

    // 完整写法(容易理解)
    /*
    mapStateToProps最终结果(state需要有connect来自动注入):{count:state.count,user:state.user}      
    */
    const mapStateToProps = function (state) {
            return { count: state.count, user: state.user }
    }
    /*
    mapDispatchToProps最终结果:
    */
    const mapDispatchToProps = function (dispatch) {
            return {
                    increment: function(number){
                            // 此处的increment就是actions中导入的increment; 执行结果: {type:INCREMENT,data:number}
                            const act=increment(number);
                            dispatch(act)
                    },
                    decrement:function(number){
                            // 此处的decrement就是actions中导入的decrement; 执行结果:{type:DECREMENT,data:number};
                            const act=decrement(number);
                            dispatch(act)
                    }
                    
            }
    }
    export default connect(
            mapStateToProps,
            mapDispatchToProps
    )(Counter)

    ```

### 根组件
- src/App.jsx
    ```jsx
    import React from 'react';
    //导入CounterContainer容器组件
    import CounterContainer from './containers/CounterContainer';
    // 导出根组件
    export default class App extends React.Component {
        render() {
            return <div>

                <h1>这是一个redux实现的计数器</h1>
                <hr />
                {/* 调用计数器容器组件 */}
                <CounterContainer></CounterContainer>
            </div>
        }
    };

    ```

### 入口函数
- src/index.js
    ```jsx
    import React from 'react';
    import ReactDOM from 'react-dom';
    // 导出容器组件Provider
    import {Provider} from 'react-redux';
    // 导入store
    import store from './redux/store';
    // 导入根组件App
    import App from './App';

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

    ```