react-redux 优化简单的todolist
为了更好的上手redux我们之前坐个redux实现的redux,那么可能很容易的感受到其中的繁琐,为了解决开发的繁琐,达到快速开发的目的,我们一般会使用react-redux插件,它可以简化Redux流程
(获取最新完整前端课程关注vx公众号:前端拓路者coder,回复:资料)
我这里只是简单展示一个使用方法,更多内容可以查阅官方文档
安装:npm install --save react-redux
安装官方文档都有呀
先放<TodoList />组件的代码 (这个组件没有过多的强调样式)
import React, { Component } from 'react'
import {connect} from 'react-redux'
const TodoList =(props) => {
const {inputChange,addList,inputValue,list} =props
return (
<div>
<input onChange={inputChange} value={inputValue}/>
<button onClick= {addList}>增加</button>
<ul>
{list.map((item,index) => {
return <li >{item}</li>
})}
</ul>
</div>
)
}
const stateToProps = (state)=>{
return {
inputValue : state.inputValue,
list : state.list
}
}//映射关系就是把原来的state映射成组件中的props属性
const dispatchToProps = (dispatch) =>{
return {
inputChange(e){
let action = {
type:'input_change',
value:e.target.value
}
dispatch(action)
},
addList() {
console.log("12")
let action = {
type:"add_list"
}
dispatch(action)
}
}
}
export default connect(stateToProps,dispatchToProps)(TodoList)
// connect，它是一个连接器（其实它就是一个方法），有了这个连接器就可以很容易的获得数据了。
使用react-redux最重要的使用两个东西
-
<Provider />组件 -
connect连接器
1.<Provider />组件是一个提供器,他可以吧store提供给它里面所有的组件
我们在inde.js入口文件中写入
import React from 'react'
import ReactDOM from 'react-dom'
import { Provider } from 'react-redux'
import TodoList from './TodoList'
import * as serviceWorker from './serviceWorker'
import store from './store'
const App = (
<Provider store={store}>
<TodoList/>
</Provider>
)
ReactDOM.render(App ,document.getElementById('root'));
serviceWorker.unregister();
{/* <Provider></Provider> 是一个提供器,使用这个组件后,组件件里面的所有的组件都可以使用store */}
2.connect连接器:把 React 组件和 Redux 的 store 真正连接起来
关于connect有许多详细的讲解,我这里放出一个讲解很深的链接,深入理解的同学戳connect的深入理解(源码级别)
先看connect用法的介绍
connect的方法的定义是这样的
connect([mapStateToProps], [mapDispatchToProps], [mergeProps],[options])
我们案例中是这样使用的
export default connect(stateToProps,dispatchToProps)(TodoList)
//TodoList:组件名
参数解释
stateToProps代表一个映射关系，我们需要制作这个映射关系。
const stateToProps = (state)=>{
return {
inputValue : state.inputValue,
list : state.list
}
}//映射关系就是把原来的state映射成组件中的props属性
有了这个参数之后可以把响应事件改成下面的代码原来的
<input value={this.state.inputValue} />
更改成
<input value={this.props.inputValue} />
我们把组件所有的派发方法也做个映射,通过 dispatchToProps才能改变store
const dispatchToProps = (dispatch) =>{
return {
inputChange(e){
let action = {
type:'input_change',
value:e.target.value
}
dispatch(action)
},
addList() {
console.log("12")
let action = {
type:"add_list"
}
dispatch(action)
}
}
}
映射关系已经做好了，接下来只要进行action的派发和reducer对业务逻辑的编写就可以了
在store文件夹中的index.js文件和reducer.js文件直接给出来啦
//index.js
import {createStore} from 'redux'
import reducer from './reducer'
const store = createStore(reducer)
export default store
//reducer.js
const defaultState = {
inputValue:"请输入",
list:['你好',"他好","我好"]
}
export default (state=defaultState,action)=>{
if (action.type=== "input_change") {
let newstate = JSON.parse(JSON.stringify(state))
newstate.inputValue=action.value
return newstate
}
if (action.type==="add_list") {
let newstate = JSON.parse(JSON.stringify(state))
newstate.list.push(state.inputValue)
newstate.inputValue=''
return newstate
}
return state
}
如果对redux基本的工作流程不太明白的可以看一下下面的文章能够更好地学习
Redux工作流程 ,单向数据流
redux做一个简单的todolist
如果这个文章对你有用的话,欢迎点赞转发关注,让更多的小伙伴看到呀,毕竟分享是一个程序员最基本的美德!!!
