redux 使用

介绍

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
})