Redux介绍及使用流程

redux

redux也是一个架构思维, 在这个架构思维中 React 充当是 视图 V

------------- redux 基础 – end ----------------------------------

redux使用流程 ( todolist – 增加一条数据 )

  1. redux是一个架构思维,我们实现需要一个工具,这个工具叫做redux
  2. 安装redux
    $ yarn add redux
  3. 在src下新建一个store,store中新建index.js用来打造store
    import { createStore } from 'redux'
    import reducer from './reducer'

    const store = createStore( reducer ) // 不加new   createStore() 参数不是一个 Object 而是一个Function

    export default store 

  1. 在store下新建一个state
    const state = {
      todos: [
        {
          id: 1,
          task: '任务一'
        }
      ]
    }
    export default state 
  1. 在 store下新建一个 reducer
	/*

      1. reducer是一个纯函数

      2. reducer要返回一个新的状态值给store 

        previousState 是指变化前的数据,也就是初始值数据

        action 是指由actionCreators发送来的action

      问题: 如何给previousState 赋值 初始值

	*/   
	import state from './state'
    const reducer = ( previousState = state , action ) => {
      const newState = {
        ...previousState           // 解构的原因是为了做深拷贝,我们操作newState,不会影响state
      }
       
      return newState
    }

    export default reducer 
  1. 在你想要使用的组件中直接引用 store
      import React, { Component,Fragment } from 'react'

      import store from '../store'

      class Content extends Component{

        constructor () {
          super()
          this.state = {
            todos: store.getState() //这里的getState是内置的方法
          }
        }

        render () {
          return (
            <Fragment>
              <div>
                <ul>
                  <li> 1 </li> //这里推荐用无状态组件渲染
                </ul>
              </div>
            </Fragment>
          )
        }

      }

      export default Content 
  1. 进行用户交互 React component — > actionCreators
  2. 在store下新建 actionCreators.js
	/* 
      actionCreators是一个对象
        对象中存储着方法
        方法是用来创建一个动作,然后发送一个动作

      后端数据交互也写在actionCreators中
	*/  
  import * as type from './type'
  import store from './index'

  const actionCreators = {
    add_todos_item ( val ) {
      //动作的创建

      const action = {
        type: type.ADD_TODOS_ITEM,
        payload: val // 负载数据
      }

      // 动作的发送
      store.dispatch( action )
    }
  }


  export default actionCreators

  1. 在Button组件中触发 actionCreators中 的方法
      import React, { Component,Fragment } from 'react'
      import actionCreators from './../store/actionCreators';

      class Button extends Component{

        add = () => {
          let val = this.input.value
          actionCreators.add_todos_item( val )
          this.input.value = ''
        }

        render () {
          return (
            <Fragment>
              <div>
                <input type = "text" ref = { el => this.input = el } />
                <br/>
                <button onClick = { this.add }> + </button>
              </div>
            </Fragment>
          )
        }

      }

      export default Button 
  1. 在 reducer中修改数据
    import state from './state'

    // const state = require( './state' )

    import * as type from './type'

    const reducer = ( previousState = state,action) => {
      let newState = {
        ...previousState
      }

      //判断用户进行了那个用户交互 ,操作新状态

      switch ( action.type ) {
        case type.ADD_TODOS_ITEM:

          //修改新状态
          newState.todos.push({
            id: newState.todos.length + 1,
            task: action.payload
          })
          
          break;
      
        default:
          break;
      }
      return newState
    }


    export default reducer 
  1. 进行数据个更新,通过store的订阅功能进行更新,也就是组件需要重新赋值一次数据
  2. 在Content组件中进行订阅
    componentDidMount () {
      store.subscribe( () => {
        this.setState({
          todos: store.getState().todos
        })
      })
    }

image

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值