【一起来学React】- Redux学习（一）

  • Z时代
  • 2024-01-10
  • 分类：综合

react

redux是一个js状态容器，提供可预测化的状态管理！在react上面用redux的比较多！

redux解决了什么问题

redux解决了，状态共享的问题和不断变化的状态管理困难问题！

什么时候需要redux

比如你在写react组件的时候，有一个状态是需要两个组件共享的，但是这两组件不是父子组件，这个时候使用redux很容易做到组件间状态共享的问题。

redux三大原则

  • 单一数据流，整个应用的state被存放在一个object tree中，并且这个object tree只存在唯一一个store（仓库）中

  • state是只读的，唯一改变的方法是触发action。

  • 使用纯函数来执行修改（编写reducers）

redux工作流

用文字概括就是：

组件通过派发action给store，然后store拿着上一次的state和action交给reducres，reducres经过操作后返回新的state给store，然后store返回给组件

redux中的store

store仓库，储存所有state

方法：

  • getState()获取状态

  • dispatch(action)派发action更改状态

  • subscribe(listener)注册监听

import { createStore } from 'redux'
import reducers from './reducers'
const store = createStore(reducers)

组件中获取状态

store.getState()

订阅stroe

store.subscribe(listener)
//listener是一个方法，只要store里面的数据发生改变就执行这个方法

redux中的actions

action在redux的作用通过上面，我们可以得知是唯一改变state的方法。

依靠store.dispatch()方法即可更新/改变state

一般来说actions分为actionTypes和actionsCreators

//actionTypes
const ADD_TODO = 'ADD_TODO'
//actionCreators
import { ADD_TODO} from '../actionTypes'
export const addTodo = function (text) {
  return  {
    type: ADD_TODO,
    text
  }
}

然后再在组件中派发actions

import * as actionCreators from './actionCreators'
store.dispatch(actionCreators.addTodo(text))

redux中的reducres

store只是一个仓库，相关的处理操作会交给reducres。（上面的工作流有介绍）

(prevState, action) => newState

一般我们会这样写

import { ADD_TODO } from './actionTypes'
const defaultState = {
  todos: []
}
//state处理函数
const addTodo = (state, action) => {
    const newState = JSON.parse(JSON.stringify(state));
    newState.todos.push(action.text)
    return newState
};
//(prevState, action)给reducers
export default (state = defaultState, action)=>{
    //reducers经过处理
        switch (action.type) {
            case ADD_TODO :
                //dosomething
                return addTodo(state,action)   //返回newState
            default:
                return state
        }
}

在reducres中，必须用纯函数来修改state,没有副作用！

redux在react中的应用(react-redux)

react-redux一看名字就知道是专门给react用的,主要是链接react和redux用的。

首先你得安装Redux和react-redux，然后创建store.

在组件中引入react-redux和redux

最后用react-redux提供的方法实现自动监听store和绑定

import {connect} from 'react-redux'
import {actionCreators, actionTypes} from './store'
const mapStateToProps = (state) => {
    return {
        todos: state.todos
    }
};
const mapDispatchToProps = (dispatch) => {
    return {
        getTodos(){
            dispatch(actionCreators.addTodo(text))
    }
};
export default connect(mapStateToProps, mapDispatchToProps)(Home);

这样react-redux会帮我们自动监听和绑定

connect()方法有两个主要的参数，而且都是可选的。第一个参数mapStateToProps是个函数，让你在数据变化时从 store获取数据，并作为 props传到组件中。第二个参数 mapDispatchToProps依然是函数，让你可以使用 store的 dispatch方法（两个函数名字不是规定死的）

本文写到这里基本告一段落，此为redux基础教程。后面一篇会写进阶教程包括异步action、中间件的使用、拆分reducers等.

以上是 【一起来学React】- Redux学习（一） 的全部内容， 来源链接： utcz.com/z/382744.html

回到顶部