使用react-redux的过程及常见的坑 -- 01

使用react-redux的过程及常见的坑 – 01

使用 react-redux和redux

1.安装

npm install redux react-redux -S

2.配置使用

大多数教程里面演示了非常复杂的配置流程，他们将store、action、reducer分离开来，使新手看不明白
因此我将不会拆分这些部分从而更简单明了的演示它们的使用方法

（1）创建store.js

// 引入redux
import {createStore} from 'redux'

// 配置默认state数据
const defaultState = {
    inputValue: '123',
    list: []
}

// 当改变store中的数据时，会自动执行reducer，reducer函数会对数据进行处理，并返回一个新的state
/**
 * 
 * @param state 旧的state
 * @param action 包含两个参数分别为type和value
 * @returns {{inputValue: string, list: []}} 新的state
 */
const reducer = (state = defaultState, action) => {
    return state
}

// 创建store
const store = createStore(reducer)

// 将store抛出供组件使用
export default store

(2)配置index.js

// 引入子组件
import TodoList from './TodoList'
// 引入react-redux中的Provider
import {Provider} from 'react-redux'
// 引入store
import store from "./store";

// 将store绑定到Provider的store属性上
// 被Provider包裹的组件都可以自由访问到store
const App = (
    <Provider store={store}>
        <TodoList></TodoList>
    </Provider>
)
// 挂载
ReactDOM.render(
  App,
  document.getElementById('root')
);

（3）配置子组件todoList.js

// 常规引入React
import React, {Component} from "react";
// 引入react-redux的连接方法
import {connect} from 'react-redux'
// 常规组件声明方式
class todoList extends Component{
    render() {
        return (
            <div>
                <div>
                
                    // 访问store中的数据  使用this.props.inputValue
                    // 调用dispatch，使用this.props.inputChange
                    <input type="text" value={this.props.inputValue} onChange={this.props.inputChange}/>
                    
                    <button>提交</button>
                </div>
                <ul>
                    <li>JSJSJS</li>
                </ul>
            </div>
        )
    }
}

// 将store的数据取出并通过props传到此组件
const stateToProps = (state) => {
    return {
        inputValue: state.inputValue
    }
}

// 将dispatch的方法取出并通过props传到此组件
const dispatchToProps = (dispatch) => {
    return {
        inputChange(e){
            console.log(e.target.value)
        }
    }
}

// 通过connect函数将store与此组件进行连接
// 连接后会返回另一个函数，需要把组件的类传入此函数然后抛出
export default connect(stateToProps,dispatchToProps)(todoList)

(4)配置一个简单的reducer

我们将store.js中的reducer更改一下，使reducer有能力更改store中的数据    
```
const reducer = (state = defaultState, action) => {
        if(action === 'changeInput') {
            // 对store中的数据state进行深度拷贝，这是一个简便方式
            let newState = JSON.parse(JSON.stringify(state))
            newState.inputValue = action.value
            return newState
        }
        return state
    }
```

(5)出发reducer

在todoList.js中修改dispatchToProps函数
```
const dispatchToProps = (dispatch) => {
    return {
        inputChange(e){
            let action = {
                type: 'changeInput',
                value: e.target.value
            }
            dispatch(action)
        }
    }
}
```

(6)后记

在正式开发中，通常要求将reducer、action、store分离开来，使代码更加简洁明了  
以上操作方式都会使用的情况下，对数据的增删改查操作都没什么太大问题  
如果在开发中需要大量使用异步处理，如ajax、延时等，需要使用redux-thunk或redux-saga等中间件操作

截至目前遇到的常见的坑

1. 页面好用，但会出现报错
   Uncaught Error: Actions must be plain objects. Use custom middleware for async actions.
   问了一下百度，大多数都说需要安装一个名为redux-thunk的中间件，我试了一下没解决，后来发现问题
   export default connect(stateToProps,dispatchToProps)(todoList)
   这里传入的时候 stateToProps和dispatchToProps后面都不要加括号，传入了一个函数执行后返回的参数，结果当然会报错

如果有其他这部分的坑可以私信我，我会持续补充