redux使用笔记

学习react之使用redux实现todoList

在学习完react基础知识后，就用简单的一个小例子来稍微实战下，以前没有系统的学习过如今从新来过，一步步了解react的相关知识。react是一个js库，提倡组件化编写代码，能够把项目分红多个组件组成一个小的项目，自己只是一个js库，数据与UI分开的模式使得更便于维护以及多人开发，初开始用的时候会以为很麻烦，尽管只是一个小功能都会分为好几个部分，真正习惯了以后会发现想当的便捷，如今咱们就从一个简单todoList开始。

这个实例主要是为了熟悉 redux因此最基础的内容可能须要你们稍微了解下react官网的内容，基础知识要稍微知道点.

技术栈

• react
• redux
• redux-thunk
• react-redux
• antd

开始初始化项目

这里开始初始化一个项目，使用的是create-react-app,运行 npm install create-react-app -g全局安装，而后运行
create-react-app demo 建立一个名为demo 的react项目，这里是会直接下载依赖的因此能够直接运行npm start启动项目，
到这里就已经成功建立并启动了一个react项目.

而后安装redux的相关依赖，运行npm install --save redux redux-thunk react-redux antd，这里的redux是为了统一管理组件的数据，将全部的
state数据存储在一个单一的数据源store内部，至关于就是一个全局对象。redux-thunk是redux的中间件，至关于一个对redux的加强，redux只能处理同步的数据，所以
涉及到异步的数据就须要这个中间件进行处理了.react-redux是为了将react和redux联合起来的，由于这两个库是独立的，须要使用这个库对他们进行绑定，是react的组件
可以从redux store中读取数据，而且想store分发action 以更新数据

正式的代码

入口的代码

// src/index.js

import React from 'react'
import ReactDOM from 'react-dom';

import * as serviceWorker from './serviceWorker';
// todoList组件
import TodoList from './TodoList'

import { Provider } from 'react-redux'
// 获取store的数据
import store from './store/index'

ReactDOM.render(
    // 这里的provider就是react-redux提供的组件，可以使其子组件都能访问到store中的数据
    <Provider store={store}><TodoList /></Provider>, document.getElementById('root'));


serviceWorker.unregister();

store的初始化代码

import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk'

import reduce from './reduce/index'

// 这是加强函数，__REDUX_DEVTOOLS_EXTENSION_COMPOSE__是为了可以使用redux devtools
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}):compose
 
// 建立store而且使用redux-thunk中间件
const store = createStore(reduce,composeEnhancers(applyMiddleware(thunk)))


export default store

而后就是建立reducer

// src/store/reduce/todo.js

// 引入定义的常量
import { ADD_ITEM, CHANGE_INPUT, DELETE_ITEM } from '../actionTypes'

// 默认数据
const defaultState = {
    inputValue: 'aabb',
    list: ['列表一','第二项']
}

// 输出reducer，其实就是一个函数，根据aciton修改state，由于store中的数据只容许在reducer中修改
export default (state = defaultState, action) => {
    let newState = JSON.parse(JSON.stringify(state))
    switch (action.type){
        case CHANGE_INPUT:
            newState.inputValue = action.value;
            return newState;
        case ADD_ITEM:
            newState.list = [...newState.list,newState.inputValue]
            newState.inputValue = ''
            return newState
        case DELETE_ITEM:
            newState.list.splice(action.index,1)
            return newState
        default:
            return state;
    }
}

而后就是如何在todoList组件中使用这些store中的数据了

import React, { Component } from 'react';
// 使用antd一个UI库，推荐按需引入
import { Button, Input, List } from 'antd'
import 'antd/dist/antd.css'

// 在入口处咱们使用了react-redux的Provider，在组件中要使用connect使他们关联起来，而后组件中就能使用store数据了
import { connect } from 'react-redux'

// 组件中会把全部对stroe数据的改动的函数提取出来做为单独的一个文件分开来写，方便维护，这些函数是要注册到connect中的
import { changeInput, addItem, deleteItem } from './store/actions/todo'

class TodoList extends Component{
    render(){
        // 引入provider传入的store中的数据，这里包含state数据也包含对数据处理的函数
        const { inputValue, list, changeInput, addItem, deleteItem } = this.props
        return (
            <div>
                <div>
                    <Input value={inputValue} style={{width: '300px',margin: '30px'}} onChange={changeInput}></Input>
                    <Button onClick={addItem}>增长</Button>
                </div>
                <ul>
                    {
                        list.map((item,index) =>{
                            return (
                                <li key={index} onClick={() => deleteItem(index)}>{item}</li>
                            )
                        })
                    }
                </ul>
            </div>
        )
    }
}


const stateToProps = (state) => {
    return {
        inputValue: state.todo.inputValue,
        list: state.todo.list
    }
}

// connect包含的两个参数，第一个是state中处理的数据，第二个是action creaters构成的对象，就是对数据处理的函数构成的对象。
// connect返回一个函数用来接收一个待包装的组件
export default connect(stateToProps, { changeInput, addItem, deleteItem })(TodoList)

完整代码请参考github地址