react-redux 优化简单的todolist

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
如果这个文章对你有用的话,欢迎点赞转发关注,让更多的小伙伴看到呀,毕竟分享是一个程序员最基本的美德!!!