Redux学习

---

title: Redux学习
date: 2021-08-24 11:14:16
tags: react
description: Redux学习

1. Redux工作流程

2.创建Redux中的仓库

// npm install --save redux

// store/index.js
import { createStore } from 'redux'
import reducer from './reducer'

const store = createStore(reducer) // 创建数据存储仓库

export default store

// store/reducer.js
cosnt defaultState = {
    inputValue: 'Write Something',
    list: [
        'xxx',
        'xxxx'
    ]
}
export default (state = defaultState, action) => { // state指原始仓库里的状态，action指action新传递的状态
	if(action.type === 'changeInput'){
        let newState = JSON.parse(JSON.stringify(state)) // 深度拷贝state
        newState.inputValue = action.value
        return newState
    }
    return state
}

// src/TodoList.js
import React, { Component } from 'react';
import 'antd/dist/antd.css'
import { Input , Button , List } from 'antd'
import store from './store'

class TodoList extends Component {
constructor(props){
    super(props)
    //关键代码-----------start
    this.state=store.getState();
    //关键代码-----------end
    this.changeInputValue = this.changeInputValue.bind(this) // 修改this的指向
    this.storeChange = this.storeChange.bind(this)
    store.subscribe(this.storeChange) // 订阅Redux的状态
}
changeInputValue(e) {
    // console.log(e.target.value)
    // 改变Redux中的state的值要通过Action
    const action = {
        type: 'change_input_value', // 对action的描述
        value: e.target.value // 要改变的值
    }
    store.dispatch(action) // 通过dispatch()方法把action传递给store
}
storeChange(){
    this.setState(store.getState) // store中状态改变时更新state
}
    render() { 
        return ( 
            <div style={{margin:'10px'}}>
                <div>
                    <Input 
                        placeholder={this.state.inputValue} 
                        style={{ width:'250px', marginRight:'10px'}}
                        onChange={this.changeInputValue}
                     />
                    <Button type="primary">增加</Button>
                </div>
                <div style={{margin:'10px',width:'300px'}}>
                    <List
                        bordered
                        //关键代码-----------start
                        dataSource={this.state.list}
                        //关键代码-----------end
                        renderItem={item=>(<List.Item>{item}</List.Item>)}
                    />    
                </div>
            </div>
         );
    }
}
export default TodoList;

3. Axios与Redux结合

在componentDidMount()中通过axios获取数据

export const getListAction = (data) => ({
    type: GET_LIST,
    data
})

componentDidMount() {
	axios.get('xxxx'.then(res=>{
        const data = res.data
        const action = getListAction(data)
        store.dispatch(action)
    }))
}

4. Redux-thunk中间件

应用场景：在Dispatch一个Action之后，到达reducer之前，进行一些额外的操作

在实际工作中你可以使用中间件来进行日志记录、创建崩溃报告，调用异步接口或者路由

// npm install --save redux-thunk
import { createStore , applyMiddleware } from 'redux' 
import thunk from 'redux-thunk'
const store = createStore(
    reducer,
    applyMiddleware(thunk)
) // 创建数据存储仓库
export default store   //暴露出去

// actionCreators.js

import axios from 'axios'
...something...
export const getTodoList = () =>{
    return (dispatch)=>{
        axios.get('https://www.easy-mock.com/mock/5cfcce489dc7c36bd6da2c99/xiaojiejie/getList').then((res)=>{
            const data = res.data
            const action = getListAction(data)
            dispatch(action)
            // console.log(data)
        })
    }
}

// TodoList.js

//先引入getTodoList
import {getTodoList , changeInputAction , addItemAction ,deleteItemAction,getListAction} from './store/actionCreatores'
---something---
componentDidMount(){
    const action = getTodoList()
    store.dispatch(action)
}