# react-redux-starter-kit

**Repository Path**: Neeil/react-redux-starter-kit

## Basic Information

- **Project Name**: react-redux-starter-kit
- **Description**: No description available
- **Primary Language**: NodeJS
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2016-06-14
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# React-Redux-Starter-Kit
This project is to help understand the usage of redux with react.

Items used in the project
* [React](https://facebook.github.io/react/index.html) the most popular front-end library.
* [Redux](https://github.com/reactjs/redux) predictable state container.
* [react-redux](https://github.com/reactjs/react-redux) the official React bindings for Redux.
* [react-router](https://github.com/reactjs/react-router)
* [webpack](https://webpack.github.io) the module bundler. very powerful. But hard to use.
* [express](expressjs.com) a popular web framework for js.

```shell
git clone https://git.oschina.net/Neeil/react-redux-starter-kit.git
npm install
npm start
```

## Redux 的简单介绍
在redux中，有以下几个关键关系需要重点理清：
* Action 在Redux中，Action为名词，用来包含发生的事件,也可以包含该事件需要传递的参数
    ```js
    // CounterPage/redux/counterAction.js
    export function increase (count = 1){
        return {
            type : COUNTER_INCREASE,
        }
    }
    ```
* Store Redux设计初衷是希望维持应用中所有的state，如果使用react,那么通俗点就是React component的state由Redux统一管理 
  且在与React配合使用的时候，store的引入通常放在Router的最外层
  ```js
  render((
    <Provider store = {store}>
        <Router history={browserHistory}>
        <Route path='/' component={App}>
            <IndexRoute component={Home}/>
            <Route path='/counter' component={CounterPage}/>
        </Route>
        </Router>
    </Provider>
  ), document.getElementById('app'))
  ```
* Reducer State的实际改变位置，或者可以认为就是action的处理部分.
    ```js
    // CounterPage/redux/counterReducer.js
    export default function counterApp(state = initialState, action){
        switch(action.type){
            case COUNTER_INCREASE:
                return  Object.assign({}, state, {
                    count: state.count +1
                })
            case COUNTER_DECREASE:            
                return Object.assign({}, state, {
                    count: state.count - 1
                })
            default :
                return state
        }
    }
    ```
    通过利用action.type来跳转进相应的处理部分，但最终应该还是只返回state. 例子中使用Object.assign()来更新state.count值
* Container 容器组件，对应的处理注入应该在这里面完成。其中的注入是使用react-redux中的connect.
* Component React中的基本组件，MVx中的V,只负责页面部分。