redux的使用

Redux 概述

redux 是一个JavaScript 容器，用于进行全局的状态管理

Redux 三大核心

1. 单一数据源
   整个应用的state被存储哎一颗object tree 中，并且这个object tree只存在于唯一一个store中

2. state 是只读的
   唯一改变state的方法就是出发action,action是一个描述已发生时间的普通对象

3. 使用纯函数进行修改‘
   为了描述action如何改变state tree ,需要编写reduces
   reduces 只是一些纯函数，他接受先前的 state和action.可以复用，可以控制顺序，传入附加参数

Redux 的组成

1. state 状态

就是我们传递的数据，那么我们在用React开发项目的时候，大致可以把state分为三类

• DomainData:可以理解为服务器端的数据，比如：获取用户信息，商品列表等等。
• UI State :决定当前展示的状态，比如：弹框的显示隐藏，受控组件等等
• App State：App级别的状态，比如：当前是否请求Loading,当前路由信息等可能被多个组件去使用的到的状态

Action 事件

• 本质就是一个JS对象
• 必须包含type属性
• 只是描述了有事情要发生，并没有描述如何去更新state

Reduce

• 本质就是函数
• 响应发送过来的action
• 函数接收两个参数，一个是初始化state
• 必须要有return 返回值

Store

• 用来把avtion和reducer关联到一起的
• 通过createStore 来构建store
• 通过苏subscribe来注册监听
• 通过dispatch 来发送action
• 通过getState 获取state

react-redux

react-redux由Provider 和connect组成

Provider

• Provider 包裹在根组件在外层，使所有的子组件都可以拿到State
• Proder 接受store 作为props ，然后通过context往下传递，这样react中任何组件都可以通过context获取到store

connect

• Provider内部组件如果想要使用到state中的数据，就 必须要connect进行一层包裹封装，话一句话说就是必须要被connect进行加强
• connect 就是方便我们组件能够获取到store 中的state

Redux 的 使用流程

npm install redux

store/index

	import {createStore} from 'redux'
	import reduce from './reduce';
	let store= createStore(reduce);
	export default store;

store/reduce.js

let defaultState = {name:'li'}
function reduce(state=defaultState,action){
	switch(action.type){
		case 'SET_NAME':
		return {
			...state,
			name:action.name
		}
	}

}
export default reduce;

index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import store from './store;
import {Provider} from 'react-redux';

const rootElement = document.getElementById("root");
ReactDOM.render(
  <React.StrictMode>
  <Provider store={store}>
    <App />
    </Provider>
  </React.StrictMode>,
  rootElement
);

redux异步处理

import {createStore,applyMiddleware} from 'redux';
import reduce from './reduce/index.js';
import thunk from 'redux-thunk'
let store = createStore(reduce ,applyMiddleware(thunk));

export default store;

//redux中的中间件都放到applyMiddleware中使用

多个recude合并

import {createStore,combineReducers} from 'redux';
import reduce from './reduce/index.js';
import nameReduce from './reduce/nameReduce';
let reduces = combineReducers({
    reduce,
    nameReduce
})
let store = createStore(reduces);

export default store