Redux学习(一)

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

redux解决了什么问题

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

什么时候需要redux

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

redux三大原则

  • 单一数据流,整个应用的state被存放在一个object tree中,并且这个object tree只存在唯一一个store(仓库)中
  • state是只读的,唯一改变的方法是触发action
  • 使用纯函数来执行修改(编写reducers

redux工作流

用文字概括就是:

组件通过派发actionstore,然后store拿着上一次的stateaction交给reducresreducres经过操作后返回新的statestore,然后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

actionredux的作用通过上面,我们可以得知是唯一改变state的方法。
依靠store.dispatch()方法即可更新/改变state

一般来说actions分为actionTypesactionsCreators


//actionTypes const ADD_TODO = 'ADD_TODO' { type: ADD_TODO, text: 'Fakin' } //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用的,理论上redux可以应用在任何js应用上面,但是一般还是比较多的使用在react应用上。

首先你得安装Reduxreact-redux,然后创建store.

在组件中引入react-reduxredux

最后用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 方法,通常都是创建 action 创建函数并预先绑定,那么在调用时就能直接分发 action。(两个函数名字不是规定死的)

本文写到这里基本告一段楼,此为redux基础教程。后面一篇会写进阶教程包括异步action 拆分reducers等.

Redux学习(一)》有2个想法

评论已关闭。