redux和react-redux

1997mhy

一. redux    npm install redux --save什么是 redux ?
Redux 是 JavaScript 状态容器，提供可预测化的状态管理。可以理解为全局数据状态管理工具，用来做组件通信等。为什么使用 redux ?
当没有使用 redux 时兄弟组件间传值将很麻烦，代码很复杂冗余。使用 redux 定义全局单一的数据 Store，可以自定义 Store 里面存放哪些数据，整个数据结构也是自己清楚的。redux 工作流

redux的核心API1. createStore()作用:创建包含指定reducer的store对象编码:import {createStore} from 'redux'import counter from './reducers/counter'（导入的reducers）const store = createStore(counter)2. store对象作用:redux库最核心的管理对象它内部维护着:statereducer核心方法:getState() 获取store中的数据。dispatch(action) 分发actionsubscribe(listener) 订阅编码:store.getState()store.dispatch({type:'INCREMENT', number})store.subscribe(render)3. applyMiddleware()作用:应用上基于redux的中间件(插件库)编码:import {createStore, applyMiddleware} from 'redux' //从redux中解构出注册中间件apiimport thunk from 'redux-thunk'  //导入redux-thunk异步中间件const store = createStore( counter, applyMiddleware(thunk) // 注册异步中间件)解释说明：redux-thunk异步中间件是redux作者出的，他的代码只有十几行。他可以使dispach分发action时action可以为一个函数。因为原本的action只能是一个带有type属性的对象。redux-thunk中间件可以在分发action后拦截action，判断是否是一个函数，如果不是函数，则不作处理，如果是函数，则把这个函数在注入dispatch。在这个函数中我们可以执行异步任务，任务结束后在使用dispatch分发给action。4. combineReducers()作用:合并多个reducer函数编码:export default combineReducers({ user, //多个Reducers chatUser,//多个Reducers chat //多个Reducers})redux的三个核心概念1. action标识要执行行为的对象包含2个方面的属性

type: 标识属性, 值为字符串, 唯一, 必要属性xxx: 数据属性, 值类型任意, 可选属性例子:

                const action = {                type: 'INCREMENT',                data: 2                }创建Action函数const increment = (number) => ({type: 'INCREMENT', data: number})2. reducer根据老的state和action, 产生新的state的纯函数样例export default function counter(state = 0, action) {          switch (action.type) {            case 'INCREMENT':              return state + action.data            case 'DECREMENT':              return state - action.data            default:              return state              }             }注意

返回一个新的状态不要修改原来的状态

3. store将state,action与reducer联系在一起的对象如何得到此对象?import {createStore} from 'redux'import reducer from './reducers'const store = createStore(reducer)此对象的功能?getState(): 得到statedispatch(action): 分发action, 触发reducer调用, 产生新的statesubscribe(listener): 注册监听, 当产生了新的state时, 自动调用二. react-reduxnpm install react-redux --save什么是react-reduxReact-Redux 是 Redux 的官方 React 绑定库。它能够使你的 React 组件从 Redux store 中读取数据，并且向 store 分发 actions 以更新数据

• React-Redux 将所有组件分成两大类：UI 组件和容器组件。UI 组件负责 UI 的呈现，容器组件负责管理数据和逻辑。
  
  • UI 组件：只负责 UI 的呈现，不带有任何业务逻辑；没有状态（即不使用 this.state 这个变量）；所有数据都由参数 this.props 提供；不使用任何 Redux 的 API
  • 容器组件：负责管理数据和业务逻辑，不负责 UI 的呈现；带有内部状态；使用 Redux 的 API。
    
• React-Redux 规定，所有的 UI 组件都由用户提供，容器组件则是由 React-Redux 自动生成。也就是说，用户负责视觉层，状态管理则是全部交给它。
  

1. 相关APIProvider让所有组件都可以得到state数据。//其实现原理借助了react的context。    <Provider store={store}>             <App />       </Provider>connect()用于包装 UI 组件生成容器组件import { connect } from 'react-redux'   connect(mapStateToProps,mapDispatchToProps)(普通ui组件)mapStateToProps:映射state为Props。mapDispatchToProps:映射dispatch为Props。mapStateToprops()将外部的数据（即state对象）转换为UI组件的标签属性   const mapStateToprops = function(state){ return {value: state}}mapDispatchToProps()将分发action的函数转换为UI组件的标签属性简洁语法可以直接指定为actions对象或包含多个action方法的对象2. redux异步编程 下载redux插件(异步中间件)npm install --save redux-thunk1. store.js

import {createStore, applyMiddleware} from 'redux'import thunk from 'redux-thunk'// 根据reducer函数创建store对象const store = createStore(  reducer,  applyMiddleware(thunk) // 应用上异步中间件)

2. redux/actions.js

// 异步action creator(返回一个函数)export const incrementAsync = number => {  return dispatch => {    setTimeout(() => {      dispatch(increment(number))    }, 1000)  }}

lws0318

limuyan44 发表于 2022-3-3 15:01
布局太乱了。

同感，看起来很累