react学习笔记-Redux入门（6）

5-1、Redux概念简述

• Redux = Reducer + Flux(2013官方推荐的数据存储插件)

  
  image.png

5-2、Redux的工作流程

image.png
image.png

5-3、使用Antd实现TodoList页面布局

• yarn add antd || npm install antd --save // 安装Antd

import 'antd/dist/antd.css'
import { Input,Button,List } from 'antd'
<div style={{marginTop: '10px',marginLeft: '10px'}}>
  <Input style={{width: '300px',marginRight: '10px'}} placeholder="todo info" />
  <Button type="primary">提交</Button>
  <List
    style={{margin: '10px 0',width: '300px'}}
    bordered
    dataSource={data}
    renderItem={item => <List.Item>{item}</List.Item>}
    />
</div>

5-4、创建redux中的store

• npm install redux --save

• src/TodoList.js

import React,{Component,Fragment} from 'react'
import 'antd/dist/antd.css'
import { Input,Button,List } from 'antd'
import './style.css'
import store from './store'

class TodoList extends Component {
  constructor (props) {
    super(props);
    this.state = store.getState()
  }
  render(){
    return (
      <Fragment>
        <div style={{marginTop: '10px',marginLeft: '10px'}}>
          <Input value={this.state.inputValue} style={{width: '300px',marginRight: '10px'}} placeholder="todo info" />
          <Button type="primary">提交</Button>
          <List
            style={{margin: '10px 0',width: '300px'}}
            bordered
            dataSource={this.state.list}
            renderItem={item => <List.Item>{item}</List.Item>}
          />
        </div>
      </Fragment>
    )
  }
}
export default TodoList

• src/store/index.js

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

const store = createStore(reducer)

export default store

• src/store/reducer.js

const defaultStore = {
  inputValue: 'hello world',
  list: ['Racing car sprays burning fuel into crowd.',
  'Japanese princess to wed commoner.',
  'Australian walks 100km after outback crash.',
  'Man charged over missing wedding girl.',
  'Los Angeles battles huge wildfires.']
}

export default (state = defaultStore, action) => {
  return state
}

5-5、Action和Reducer的编写，5-6、使用Redux完成TodoList删除功能

Redux DevTools 插件下载https://github.com/zalmoxisus/redux-devtools-extension，低版本插件会报Cannot read property 'state' of undefined的错，升级下插件就解决了。

// src/store/index.js中添加配置信息
const store = createStore(
 reducer,
 window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() // 添加的配置信息
)
// 在5-4中src/TodoList.js文件中添加方法
<Input
 onChange={this.handleInputChange}
/>
<Button type="primary" onClick={this.handleButtonClick}>提交</Button>
<List
 style={{margin: '10px 0',width: '300px'}}
  bordered
 dataSource={this.state.list}
 renderItem={(item,index) => <List.Item onClick={this.handleItemDelete.bind(this, index)}>{item}</List.Item>}
/>
constructor (props) {
   super(props);
   this.state = store.getState()
   this.handleInputChange = this.handleInputChange.bind(this)
   this.handleStoreChange = this.handleStoreChange.bind(this)
   this.handleButtonClick = this.handleButtonClick.bind(this)
   // 订阅事件,监听store中数据变化会执行this.handleStoreChange方法
   store.subscribe(this.handleStoreChange)
 }
 handleInputChange (e) {
   console.log(e.target.value)
   const action = {
     type: 'change_input_value',
     value: e.target.value
   }
   store.dispatch(action)
 }
 handleStoreChange () {
   console.log('store change')
   this.setState(store.getState())
 }
 handleButtonClick () {
   const action = {
     type: 'add_todo_item'
   }
   store.dispatch(action)
 }
handleItemDelete (index) {
   const action = {
     type: 'delete_todo_item',
     index: index
   }
   store.dispatch(action)
 }

5-7、ActionTypes的拆分

• 拆分后虽然看似复杂了，需引入两次
  优点：
• 方便统一管理
• types书写错误时不会报错，不容易排查，如果换成变量则会有提示性报错

// 新建src/store/actionTypes
const CHANGE_INPUT_VALUE = 'change_input_value'
const ADD_TODO_ITEM = 'add_todo_item'
const DELETE_TODO_ITEM = 'delete_todo_item'
// 将reducer.js和ToDoList.js中的'change_input_value'字符串用变量替换，同时需引入
import { CHANGE_INPUT_VALUE, ADD_TODO_ITEM, DELETE_TODO_ITEM } from './store/actionTypes'

5-8、使用actionCreator统一创建action

• 项目代码结构复杂时，方便统一管理

// 新建src/store/actionCreators.js文件
import { CHANGE_INPUT_VALUE, ADD_TODO_ITEM, DELETE_TODO_ITEM } from './actionTypes'
export const getInputChangeAction = (value) => ({
  type: CHANGE_INPUT_VALUE,
  value
})
export const getAddItemAction = () => ({
  type: ADD_TODO_ITEM
})
export const getDeleteItemAction = (index) => ({
  type: DELETE_TODO_ITEM,
  index
})

5-9、Redux知识点复习补充

• store是唯一的
• 只有store能够改变自己的内容
• reducer 可以接收state，但是绝不能修改state
• Reducer必须是纯函数

纯函数：给定固定的输入，就一定会有固定的输出，而且不会有任何副作用

Redux的核心API

• ccreateStore // 创建store
• store.dispatch // 派发action，传递给store
• store.getState // 获取到store中所有的数据内容
• store.subscribe // 订阅store的改变，只要store发生改变，subscribe接收的回调函数就会被执行

本文中Redux入门所有章节示例代码:https://pan.baidu.com/s/1ixKXcAy7jy93IdoNIzspvw