介绍

1.Store 就是把它们联系到一起的对象。Store 有以下职责：

维持应用的 state； 提供store. getState() 方法获取 state； 提供 store.dispatch(action) 方法更新 state； 通过 subscribe(listener) 注册监听器; 通过 subscribe(listener) 返回的函数注销监听器。

2.Action 是把数据从应用（译者注：这里之所以不叫 view 是因为这些数据有可能是服务器响应，用户输入或其它非 view 的数据 ）传到 store 的有效载荷。它是 store 数据的唯一来源。

{ type: 'ADD_TODO', text: 'Build my first Redux app'

3.Reducers 指定了应用状态的变化如何响应 actions 并发送到 store 的，记住 actions 只是描述了有事情发生了这一事实，并没有描述应用如何更新 state。

4.图解 在react中使用 Redux 默认并不包含 React 绑定库，需要单独安装。

1.安装

//npm 安装 npm install --save react-redux npm install --save redux //yarn 安装 yarn add react-redux -S

2.使用 下面是store下面的index.js的内容:

import {createStore} from 'redux' import reducer from './reducer' const store=createStore(reducer); export default store;

最后回到父组件再去使用这个store,下面的代码是个例子:

import React, { Component } from 'react' import 'antd/dist/antd.css'; import store from './store/index.js'; import {getInputChangeAction} from './store/actionCreators'; import ToListUI from './TodoListUI'; class TodoList extends Component{ constructor(props){ super(props); this.state = store.getState() this.handleInputChange = this.handleInputChange.bind(this); this.handleStoreChanged = this.handleStoreChanged.bind(this); this.handleBtnClick = this.handleBtnClick.bind(this); this.handleItemDelete = this.handleItemDelete.bind(this); //监听store是否发生改变，一旦发生改变store就会执行subscribe函数 store.subscribe(this.handleStoreChanged); } render() { return <ToListUI inputValue={this.state.inputValue} list={this.state.list} handleInputChange={this.handleInputChange} handleBtnClick={this.handleBtnClick} handleItemDelete={this.handleItemDelete} /> } componentDidMount(){ const action = getInitList(); store.dispatch(action); // axios.get('/list.json') // .then((res) => { // const data = res.data; // const action = initListAction(data); // store.dispatch(action); // }) //redux-thunk // const action = getTodoList(); // //store如果发现这个action是个函数那么就会自动执行这个action函数 // //这就是actionCreators中getTodoList()方法会执行的原因 // store.dispatch(action); } handleStoreChanged() { this.setState(store.getState()); } handleInputChange(e){ const action = getInputChangeAction(e.target.value) store.dispatch(action); } handleBtnClick(){ const action = getAddTodoItem(); store.dispatch(action); } handleItemDelete(index){ const action = getDeleteTodoItem(index); store.dispatch(action); } } export default TodoList;

3.在store中创建 actionTypes.js

export const CHANGE_INPUT_VALUE="change_input_value"; export const ADD_TODO_ITEM="add_todo_item";

4.我们首先将store给import进来，然后getState()获取到store下面的state赋值给当前组件下的state，每一个动作都派发一个action给reducer，下面reducre登场。

import {CHANGE_INPUT_VALUE,ADD_TODO_ITEM,DELETE_TODO_ITEM,INIT_LIST_ACTION} from './actionTypes'; const defaultState = { inputValue: '闻声识雨', list: [] } //reducer可以接受state但是绝不能修改state,所以需要拷贝到newState //纯函数指的是,给固定的输入，就一定会有固定的输出，而且不会有副作用 export default (state = defaultState, action) => { switch(action.type){ case CHANGE_INPUT_VALUE: return { ...state, list:action.list } case ADD_TODO_ITEM: retrun { ...state, inputVlue:action.data } default: retrun state } }

5.在store中创建 actionCreators.js

import {CHANGE_INPUT_VALUE} from './actionType.js' export const getInputChangeAction=()=>({ type:CHANGE_INPUT_VALUE, value })