react的redux的简单应用

要注意的是，Redux 和 React-redux 并不是同一个东西。Redux 是一种架构模式（Flux 架构的一种变种），它不关注你到底用什么库，你可以把它应用到 React 和 Vue，甚至跟 jQuery 结合都没有问题。而 React-redux 就是把 Redux 这种架构模式和 React.js 结合起来的一个库，就是 Redux 架构在 React.js 中的体现。

1.先在src目录下创建一个store文件夹

2.在store文件夹下分别创建index.js，actions.js,actionsType.js,reducre.js四个js文件，下面是js文件的作用

index.js主文件

import { createStore } from 'redux'
import reducre from './reducre'

const store = createStore(
    reducre,
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
)

export default store;

actions.js 行为 

它是一个对象 里面必有type来指定其类型 这个类型可以理解为你要做什么，reducer要根据action的type来返回不同的state 每个项目有且可以有多个action

import { DELETE_DATAS } from './actionTypes';
const deles = (todoId) => ({
type: DELETE_DATAS,
todoId
})
export { deles }

actionsType.js 存放行为(actions)的常量

const DELETE_DATAS = 'delete_todos'
export { DELETE_DATAS }

reducer： 可以理解为一个专门处理state的工厂 给他一个旧数据它会根据不同action.type返回新的数据 也就是：旧state + action = 新state 每个项目有且可以有多个reducer

// 默认数据
import { DELETE_DATAS } from './actionTypes'
const defaultSate = {
    todo: [
        { id: 1, title: '看一小时Vue', flag: false },
        { id: 2, title: '看2小时Vue', flag: false },
        { id: 3, title: '看3小时Vue', flag: false }
    ],
    count: 0,
}
export default (state = defaultSate, action) => {


    if (action.type === DELETE_DATAS) {
        console.log(state, action)
        const newSate = state;
        newSate.todo.forEach((item, index) => {
            if (item.id == action.todoId) {
                newSate.todo.splice(index, 1)
            }
        })

        return newSate;
    }

    return state;
}

todo.js

import React, { Component } from 'react';
import store from '../store/index';
import { deles } from '../store/actions';
class Todo extends Component {
    constructor(props) {
        super(props);
        this.state = store.getState();
        this._storeChange = this._storeChange.bind(this);
        //订阅模式，监听store的改变，调用对应的方法
        store.subscribe(this._storeChange)

    }
    render() {

        return (
            <div>
                <input type="text" />
                <ul>
                    {
                        this.state.todo.map((items, index) => {
                            return <li key={index} onClick={() => this.deleteHandle(items.id)}>{items.title}</li>
                        })
                    }

                </ul>
            </div>
        );
    }
    deleteHandle(id) {

        store.dispatch(deles(id))
    }
    _storeChange() {
        //sotr改变，重新设置state，
        this.setState(store.getState())
    }
}

export default Todo;

小结：

首先使用redux，需要先创建index.js，actions.js（告诉redux为什么这么做，也可以接受传递的值）,actionsType.js（存放常量）,reducre.js（只能在这里修改sotr中的数据，可以设置store的默认数据）

当使用修改store的时候，需要引入actions.js，然后通过store.dispath,

store.dispath作用就是我给你actions,reducre需要根据actions.type返回新的state

虽然通过store.dispath修改了数据，但是页面中的数据并没有及时更新，这时候就需要使用store.subscribe

store.subscribe它的作用就是每当reducer返回新的数据 它就会自动更新页面 把UI组件的state更新下 不然的话 虽然state变化了 页面仍不会更新

redux使用redux-devtools

import { createStore, applyMiddleware, compose } from 'redux';
import reducer from './reducer/index'
import thunk from 'redux-thunk';
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}) : compose;
const enhancer = composeEnhancers(
    applyMiddleware(thunk),
)
var store = createStore(
    reducer,
    enhancer
);

export default store;