React Redux安装、使用

Redux是一个充当状态容器的库，可帮助管理应用程序数据流；它是零依赖的，可以配合其他框架或者类库一起使用。在Redux架构中最重要的三部分是Actions，Store 以及 reducer

Redux 工作流程

image.png

对照图例讲一个故事，更容易的去理解Redux!!!!

Redux Flow是一个图书馆
借书的用户(组件)React Component ， 它说要借***书（对话） Action Creators， 管理员Store接收到了对话，管理员去图书库Readucers里找这本书， 如果有那么它把书借给用户

安装

npm install --save redux

创建Redux

在src目录下新建store文件夹创建
index.js store

import {createStore} from 'redux'; //导入redux ， 从 redux 引入一个方法 createStore
import reducer from "@/store/reducer"; //导入库reducer，

const store = createStore(reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()); //创建一个store，并把库里得内容传递进去

export default store; //导出暴露出store

reducer.js

import {CHANGE_INPUT_VALUE, ADD_TODO_ITEM, DELETE_TODO_ITEM } from './actionTypes' //导入 actionTypes 常量
//库默认数据
const defaultState = {
  inputValue: '',
  list: ['我是郭靖','我是黄老邪','我是黄蓉'],
};

//返回数据
export default (state = defaultState, action) => {
  //state 只可以接收，但是绝对不可以修改，所以我们要拷贝一份state做修改，并返回回去
  const newState = JSON.parse(JSON.stringify(state));
  if(action.type === CHANGE_INPUT_VALUE){
    newState.inputValue = action.value;
    return newState;
  }
  if(action.type === ADD_TODO_ITEM){
    newState.list.push(newState.inputValue);
    newState.inputValue = '';
    return  newState;
  }
  if(action.type === DELETE_TODO_ITEM){
    newState.list.splice(action.index, 1);
    return newState;
  }
  return state;
};

actionTypes.js

//暴漏type常量
export const CHANGE_INPUT_VALUE = 'change_input_value';
export const ADD_TODO_ITEM = 'add_todo_item';
export const DELETE_TODO_ITEM = 'delete_todo_item';

actionCreators.js

//操作redux方法，这样写提高代码可维护性，并对自动化测试有好处
import {CHANGE_INPUT_VALUE, ADD_TODO_ITEM, DELETE_TODO_ITEM } from './actionTypes' //导入 actionTypes 常量

export const getInputChange = (value) => ({
  type: CHANGE_INPUT_VALUE,
  value,
});

export  const getAddItem = () => ({
  type: ADD_TODO_ITEM,
})

export  const getDeleteTodoItem = (index) => ({
  type: DELETE_TODO_ITEM,
  index,
})

使用 todoList为例

父组件

import React, {useState} from 'react';
import Store from '../../store';  //导入store
import {getInputChange, getAddItem, getDeleteTodoItem} from '../../store/actionCreators'; //导入 actionCreators 方法
import {Button, Input, Message} from '@alifd/next';
import List from './components/list';
import styles from './index.module.scss';

export default function TodoList() {
  const [storeState, setStoreState] = useState(Store.getState()); //获取 Redux 数据 .getState()
  Store.subscribe(storeChange); //订阅 Redux 的改变，只要 Redux 发生改变 storeChange方法就会自动执行一次

  //重新获取 Redux 数据
  function storeChange() {
    setStoreState(Store.getState());
  }

  //删除方法，参数为下标
  function deleteListItem(index) {
    const action = getDeleteTodoItem(index)
    Store.dispatch(action); //调用 dispatch 并传递参数给 Redux
  }

  return (
    <div className={styles.todoList}>
      <div className={styles.todoSo}>
        <Input
          placeholder="请输入"
          value={storeState.inputValue}
          onChange={(e) => {
            const action = getInputChange(e)
            Store.dispatch(action);
          }}
          className={styles.todoInput}/>
        <Button
          type="primary"
          className={styles.todoButton}
          onClick={() => {
            if (storeState.inputValue){
              const action = getAddItem();
              Store.dispatch(action);
            }else{
              Message.error('输入不能为空');
            }
          }}>添加</Button>
      </div>
      <ul className={styles.todoUl}>
        {storeState.list.map((item, index) => (
          <List key={index} item={item} index={index} deleteItem={deleteListItem}/>
        ))}
      </ul>
    </div>
  );
};

子组件

import React from 'react';

export default function List(props) {
  function delItem(index) {
    props.deleteItem(index);
  }

  return (
    <li onClick={delItem.bind(this, props.index)}>{props.index} - {props.item}</li>
  );
};