Redux基本语法

电玩女神 2021-09-15 12:22 432阅读 0赞

# 一.Redux #

## 1.什么是Redux ##

Redux是专注于状态管理,单一状态 ，单向数据流处理.

![20180530163241334][]

在Redux中，所有的数据（比如state）被保存在一个被称为store的容器中 → 在一个应用程序中只能有一个。store本质上是一个状态树，保存了所有对象的状态。任何UI组件都可以直接从store访问特定对象的状态。要通过本地或远程组件更改状态，需要分发一个action。分发在这里意味着将可执行信息发送到store。当一个store接收到一个action，它将把这个action代理给相关的reducer。reducer是一个纯函数，它可以查看之前的状态，执行一个action并且返回一个新的状态。简单的理解：old state  ———》action(行为状态：type:\{接受类型\})  ——》reducer 函数（计算state，）——》得到 new  state

import { createStore, applyMiddleware} from 'redux'
    import thunk from 'redux-thunk'; 
    
    //3.新建store  compose结合redux devTool的插件
    const store = createStore(chat,applyMiddleware(thunk))
    
    //1.定义常量  action
    const MSG_LIST = 'MSG_LIST' //聊天信息列表
    const MSG_RECV = 'MSG_RECV' //接受信息
    const MSG_READ = 'MSG_READ' //未读信息
    
    /*2.reducer
    函数有2个参数，一个state 一个action
    */
    //state的值
    const initState = {
    	chatmsg:[],//每条聊天的信息
    	users:{},//用户信息
    	unread:0//未读信息列表
    }
    
    export function chat(state=initState, action){
    	switch(action.type){
    		case MSG_LIST:
    			return {...state,users:action.payload.users,chatmsg:action.payload.msgs,unread:action.payload.msgs.filter(v=>!v.read&&v.to==action.payload.userid).length}
    		case MSG_RECV:
    			return {...state,chatmsg:[...state.chatmsg,action.payload],unread:state.unread+n}
    		case MSG_READ:
    			return {...state,chatmsg:[...state.chatmsg,action.payload]}
    		default:
    		 	return state
    	}
    }
    
    //简单的话  就只要1-3的步骤，不过一般都是还含有action函数   
    
    //1.2  action函数
    function msgList(msgs,users,userid){
    	return {type:MSG_LIST,payload:{msgs,users,userid}}
    }
    //1.1  接受请求的后端的函数
    export function getMsgList(){
    	return (dispatch)=>{
    		axios.get('/user/getmsglist')
    			.then(res=>{
    				if (res.status===200&&res.data.code===0) {
    					dispatch(msgList(res.data.msgs,res.data.users))
    				}
    			})		
    	}
    }

## 2.三个基本原则 ##

A.单一数据源  
       整个应用的 state 被储存在一棵 object tree 中，并且这个 object tree 只存在于唯一一个 store 中。  
B.State 是只读的  
唯一改变 state 的方法就是触发 action，action 是一个用于描述已发生事件的普通对象。  
C.使用纯函数来执行修改

为了描述 action 如何改变 state tree ，你需要编写 reducers。

# 二、基本概念 #

## 1.Store ##

Store 就是保存数据的地方，你可以把它看成一个容器。整个应用只能有一个 Store。

Redux 提供createStore这个函数，用来生成新的Store。

import { createStore } from 'redux';
    const store = createStore(fn);

**createStore函数接受另一个函数作为参数，返回新生成的 Store 对象**。

注意：

createStore方法还可以接受第二个参数，表示 State 的最初状态。这通常是服务器给出的。

let store = createStore(todoApp, window.STATE_FROM_SERVER)

上面代码中，window.STATE\_FROM\_SERVER就是整个应用的状态初始值。注意，如果提供了这个参数，它会覆盖 Reducer 函数的默认初始值。

## 2. State ##

**state是Store对象包含所有数据**。如果想得到某个时点的数据，就要对 Store 生成快照。这种时点的数据集合，就叫做 State。  
当前时刻的 State，可以**通过store.getState()**拿到。

import { createStore } from 'redux';
    const store = createStore(fn);
    const state = store.getState();

Redux 规定， 一个 State 对应一个 View。只要 State 相同，View 就相同。你知道 State，就知道 View 是什么样，反之亦然。

## 3.Action ##

Action是把数据从应用传到store的有效载荷。它是store数据的唯一来源。一般来说，通过store.dispatch()将action传到store。

State 的变化，会导致 View 的变化。但是，用户接触不到 State，只能接触到 View。所以，State 的变化必须是 View 导致的。Action 就是 View 发出的通知，表示 State 应该要发生变化了。

**Action 是一个对象**。其中的type属性是必须的，表示 Action 的名称。

const ADD_TODO = 'ADD_TODO'
    //Action 的名称是ADD_TODO，它携带的信息是字符串ADD_TODO
    
    const action = {
    	type: 'ADD_TODOS',
    	payload: 'Learn Redux'
    };
    //Action 的名称是ADD_TODOS，它携带的信息是字符串Learn Redux。

可以这样理解，Action 描述当前发生的事情。改变 State 的唯一办法，就是使用 Action。它会运送数据到 Store。其他属性可以自由设置，社区有一个[规范][Link 1]可以参考。

## 4.Action Creator ##

View 要发送多少种消息，就会有多少种 Action。如果都手写，会很麻烦。可以定义一个函数来生成 Action，这个函数就叫 Action Creator。**简单来说Action 创建函数 就是生成 action 的方法**。“action” 和 “action 创建函数” 这两个概念很容易混在一起，使用时最好注意区分。

在 Redux 中的 action 创建函数只是简单的返回一个 action:

function addTodo(text) {
      return {
        type: ADD_TODO,
        text
      }
    }
    const action = addTodo('Learn Redux');
    上面代码中，addTodo函数就是一个 Action Creator。

## 5.Reducer ##

Store 收到 Action 以后，必须给出一个新的 State，这样 View 才会发生变化。这种 State 的计算过程就叫做 Reducer。

Reducer 是一个函数，它接受 Action 和当前 State 作为参数，返回一个新的 State。也可以这样说Reducers 指定了应用状态的变化如何响应 actions 并发送到 store 的，记住 actions 只是描述了有事情发生了这一事实，并没有描述应用如何更新 state。

//通过reducer函数来计算:根据老的state 和action ，生成新的state
    const defaultState = 0;
    const reducer = (state = defaultState, action) => {
      switch (action.type) {
        case 'ADD':
          return state + action.payload;
        default: 
          return state;
      }
    };
    
    const actions = [
    	{ type: 'ADD', payload: 0 },
    	{ type: 'ADD', payload: 1 },
    	{ type: 'ADD', payload: 2 }
    ];
    //1.新的store
    const store=createStore(reducer);
    //action 创建函数
    function addTodo(payload) {
    	return {
    		type: 'ADD',
    		payload
    	}
    }
    
    //派发事件 传递action
    store.dispatch(addTodo(2))
    console.log(store.getState())//输出state的值是2

通过上面的代码，就可以了解到reducer函数就是计算state的过程。

注意：r**educer有特别的一点就是纯函数**。也就是说，只要是同样的输入，必定得到同样的输出。

纯函数是函数式编程的概念，必须遵守以下一些约束。

不得改写参数
    不能调用系统 I/O 的API
    不能调用Date.now()或者Math.random()等不纯的方法，因为每次会得到不一样的结果

由于 Reducer 是纯函数，就可以保证同样的State，必定得到同样的 View。但也正因为这一点，Reducer 函数里面不能改变 State，必须返回一个全新的对象.

请参考：[Reducer 最佳实践，Redux 开发最重要的部分][Reducer _Redux]

[Redux Reducer 的拆分][Redux Reducer]

# 三.API #

## (一).Store API ##

### 1.store.getState() ###

store.getState()就是获取当前state的值

//派发事件 传递action
    store.dispatch(addTodo(2))
    console.log(store.getState())//输出state的值是2

### 2.store.dispatch() ###

store.dispatch()是 View 发出 Action 的唯一方法。store.dispatch接受一个 Action 对象作为参数，将它发送出去

function counter(state=0,action){
    	switch(action.type){
    		case '加机关枪':
    			return state+1
    		case '减机关枪':
    			return state-1
    		default:
    			return 10
    	}
    }
    
    //1.新的store
    const store=createStore(counter);
    //action 创建函数
    function addTodo(text) {
      return {
        type: '加机关枪',
        text
      }
    }
    
    //派发事件 传递action
    store.dispatch(addTodo('666'))
    console.log(store.getState())//输出state的值是11

### 3.store.subscribe() ###

Store 允许使用store.subscribe方法设置监听函数，一旦 State 发生变化，就自动执行这个函数。

![20180531112423182][]

显然，只要把 View 的更新函数（对于 React 项目，就是组件的render方法或setState方法）放入listen，就会实现 View 的自动渲染。

store.subscribe方法返回一个函数，调用这个函数就可以解除监听。

let unsubscribe = store.subscribe(() =>
      console.log(store.getState())
    );
    
    unsubscribe();

### 4.replaceReducer(nextReducer) ###

替换 store 当前用来计算 state 的 reducer。这是一个高级 API。只有在你需要实现代码分隔，而且需要立即加载一些 reducer 的时候才可能会用到它。在实现 Redux 热加载机制的时候也可能会用到。

# 四.Redux如何和React一起使用 #

例子：对机关枪的管理，这里上交(减少)和申请(增加机关枪)管理

Redux如何和React一起使用，具体操作：把store.dispatch方法传递给组件,内部可以调用修改状态，subscribe订阅render函数，每次修改都重新渲染，redux相关内容，一道单独的文件index.redux.js单端管理

1.首先创建action  对机关枪的操作  统一创建在index.redux.js

//6.通过发送过来的action 找到对应的type  就知道是 reducer 的counter函数时加1还是减1
    //就得到新的store
    
    //action
    const ADD_GUN='加机关枪';
    const REMOVE_GUN='减机关枪';
    
    //reduer
    export function counter(state=0,action){
    	switch(action.type){
    		case '加机关枪':
    			return state+1
    		case '减机关枪':
    			return state-1
    		default:
    			return 10
    	}
    }
    
    //action creator
    export  function addGUN(){
    	return {type:ADD_GUN}
    }
    export  function removeGUN(){
    	return {type:REMOVE_GUN}
    }

2.要引入模板 创建store   index.js

import React from 'react';
    import ReactDOM from 'react-dom';
    import App from './App';
    import registerServiceWorker from './registerServiceWorker';
    import { createStore } from 'redux'; 
    import {counter,addGUN,removeGUN} from './index.redux';
    
    //1.新建store
    const store = createStore(counter);
    
    
    function render() {
    	//reactDOM 渲染页面
       //2.这个store 以在组件属性props传给Component 组件
    	ReactDOM.render(<App store={store} addGUN={addGUN} removeGUN={removeGUN} />, document.getElementById('root'));
    	registerServiceWorker();
    }
    render();
    //3.以subscribe订阅render的函数 这样我们可以知道state的变化
    store.subscribe(render);

Store 的监听函数设置为render，每次 State 的变化都会导致网页重新渲染。

3.组件页面的操作 App.js

import React from 'react';
    
    class App extends React.Component {
    	render() {
    		//4.通过组件的属性props 获取store以及数据操作addGUN
    		//5.在通过dispatch(addGUN()) 发送action
    		const store=this.props.store;
    		const num =store.getState();
    		const addGUN=this.props.addGUN;
    		const removeGUN=this.props.removeGUN;
    		return (
    			<div>
    				<h1>现在有机枪{num}把</h1>
    				<button onClick={()=>store.dispatch(addGUN())}>申请武器</button>
    				<button onClick={()=>store.dispatch(removeGUN())}>上交武器</button>
    			</div>
    		);
    	}
    }
    
    export default App;

![20180531161838497][]

参考：[Redux 入门教程（一）：基本用法][Redux]

[Redux.自述][Redux.]

通过上面的学习得到自己的理解：

创建action(多个类型)——》创建reducer(计算每个类型下的state的值)——》通过这个reducer函数  得到新的值state( const store=createStore(reducer) const state = store.getState();)——》把这个值以props属性传给组件——》组件接受新的值——》同时发布(dispatch)该组件的acton类型——》通过组件分派的action得到是reducer那种类型下的计算方法——》得到值

如果有理解错误，请大家指出来。

[20180530163241334]: /images/20210813/1cd0b917b5284a049cf9285cb36ac401.png
[Link 1]: https://github.com/redux-utilities/flux-standard-action
[Reducer _Redux]: https://blog.csdn.net/sinat_17775997/article/details/54374898
[Redux Reducer]: https://blog.csdn.net/gao_xu_520/article/details/80523640
[20180531112423182]: /images/20210813/522682cc631e4da7bf84ddf8cacd4867.png
[20180531161838497]: /images/20210813/6d602b419029409893cd9ae3c0c24944.png
[Redux]: http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_one_basic_usages.html
[Redux.]: http://www.redux.org.cn/