Redux在React中的使用
Redux在react中的使用方法
作为一个用习惯了vuex的Vuer，第一次用redux真的想哭了，繁琐的操作，变态的写法，好在经过一天认真的阅读了下官网的说明，算是简单搞清楚了使用方法，简单的跟vuex对比一下，做个记录，以下文字相对白话，只是为了方便理解
简单定义一个todolist
1. 定义reducer
redux中的reducer类比vuex的mutations，都是更改state，不同点在于redux需要将新的state返回，vuex不需要，多个reducer可以分多个js文件，然后在index.js中通过combineReducers将reducer合并，类似vuex的Modules，实例代码
const todos = (state = [], action) => {
switch (action.type) {
case 'ADD_TODO':
return [
...state,
{
id: action.id,
text: action.text
}
]
default:
return state;
}
}
export default todos
import { combineReducers } from 'redux'
import todos from './todos'
export default combineReducers({
todos
})
2. 定义action
redux的action，是定义需要调用那个reducer，主要是根据type字段，对应reducer的action.type，同时也可以传递一些参数，实例代码
let nextTodoId = 0;
export const addTodo = (text, id = nextTodoId++) => ({
type: 'ADD_TODO',
id: id,
text
})
action不是必须要单独定义的，也可以在页面调用时直接写，例如
const actions = {
increase: () => ({type: 'INCREASE'}),
decrease: () => ({type: 'DECREASE'})
}
const store = createStore(reducer);
store.dispatch(actions.increase())
不过为了方便以后统一处理，最好还是单独定义一下
3. 定义containers
定义完了上面的reducer和action，最关键的是要在页面中调用，因此需要定义一些显示的组件，官网上是定义的components，然后在containers中调用，这里为了方便展示我就直接放containers中了，实例代码:
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { addTodo } from '../actions'
import './index.css'
const mapStateToProps = state => ({
todos: state.todos
})
const mapDispatchToProps = (dispatch, ownProps) => {
return {
addToList: (value) => dispatch(addTodo(value)),
}
}
class AddTodo extends Component {
constructor(props) {
super(props)
this.state = {
value: ''
}
}
onChangeValue = (e) => {
this.setState({
value: e.target.value
})
}
render() {
const { todos, addToList } = this.props;
return (
<div>
<input type="text" value={this.state.value} onChange={this.onChangeValue}></input>
<div className="todos">
{todos.map((item, index) => {
return (
<div key={index}>{item.id + ':' + item.text}</div>
)
})}
</div>
<button type="button" onClick={addToList.bind(this, this.state.value)}>增加</button>
</div>
)
}
}
export default connect(mapStateToProps, mapDispatchToProps)(AddTodo)
从上往下挑一些重点说明一下
import { connect } from 'react-redux'最重要的引用，create-react-app默认是不带react-redux的，需要手动安装一下npm i -S react-redux redux，一定不要忘了还要装redux，官网就简单的说安装react-redux，只装一个会报错- mapStateToProps，简单理解就是将reducer中的state转换成页面可以用的props，同时也可以对state进行一些处理，类似vuex的getter
- mapDispatchToProps，就是调用reducer的方法，接收两个参数，dispatch 和 ownProps，
(value) => dispatch(addTodo(value))就是调用action中定义的type对应的方法，value是对应的参数 - render中const { todos, addToList } = this.props，解构props，todos是mapStateToProps定义的对象，addToList是mapDispatchToProps定义的对象方法，使用方式和正常的props相同
-最后导出组件connect(mapStateToProps, mapDispatchToProps)(AddTodo)，写法比较固定，mapStateToProps如果没有不能不写，可以写成connect(null, mapDispatchToProps)(AddTodo)
4. app.js中展示
import React, { Component } from 'react';
import AddTodo from './containers/AddTodo'
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<AddTodo></AddTodo>
</div>
);
}
}
export default App;
最后： 以上只是redux的最简单使用示例，方便从vue转过来的朋友参考学习，如果有不对的地方，希望能评论中指出
