redux基础概念

< h1 >了解redux </ h1 >

< p >了解几个基本概念

1.Store

(1)Store:保存数据的地方，可以看成一个容器（仓库），整个应用只能有Store

(2)Redux提供了CreateStore这个函数，用来生成Store。

import { createStore } from 'redux';

const store = createStore(fn);

(这里的fn是一个函数，createStore是需要接收一个函数，生成Store对象)

2.State

(1)Store对象包含所有的数据,如果想得到某一个时点的数据，就要对Store生成快照。

这个时点的数据集合，就叫State。

(2)那么如何获取到State，通过Stote.getState()拿到。

(3)一个State对应一个View。只要State相同，View就相同，你知道State，就知道View是什么样。

import {createStore} from "redux";

const storeObj = createStore(fn);

const stateObj = storeObj.getState();

3.Action

(1)State的变化，会导致View的变化,但是用户接触不到State，只能接触到View。

所以，State的变化必须是View导致的,Action就是View发出的通知，表示State应该要发生变化了

(2)Action是一个对象，其中type属性是必须的，表示Action的名称。其他的属性可以自由设置

(3)Action 描述当前发生的事情，改变State的唯一的办法，就是使用Action，它会运送数据到Store

const action = {

type: "ADD_TODO", // 名称

payload: "Action例子" //携带的信息是字符串

}

4.Action Creator

(1)View要发送多少种消息，就会有多少种Action，如果手写就会麻烦，可以定义一个函数生成Action，这个函数就叫Action Creator

const ADD_TODO = "添加TODO";

function addTodo(text){

return {

type: ADD_TODO,

text

}

}

const action = addTodo('xxxx'); //其实这里的addTodo就是一个Action Creator。

5.store.dispatch()

(1)store.dispatch()是View发出Action的唯一方法。

(2)store.dispatch接收Action对象作为参数，将他发送出去。

import {creatStore} from "redux";

const store = createStore(fn);

function addTodo(text){

return{

type: ADD_TODO,

text

}

}

store.dispatch(addTodo(xxxxx));

6.Reducer

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

(2)Reducer 是一个函数，它接受Action和当前State作为参数，返回一个新的State。

const Reducer = funtion(state, action){

return new_state;

}

(3)整个应用的初始状态，可以作为State的默认值,（这个没有太明白）

const defaultState = 0;

const reducer = (state=default, action) => {

switch(action.type){

case 'ADD':

return state + action.payload;

default:

return state;

}

}

const state = reducer(1, {

type: 'ADD',

payload:2

})

(4)在实际的应用中，Reducer函数不用像上面这样手动调用，store.dispatch方法会触发Reducer的自动执行，

(5)Store需要知道Reducer函数，做法就是在生成Store的时候，将Reducer传入createStore方法。

import { createStore } from 'redux';

const store = createStore(reducer);

(6)createStore接受Reducer作为参数，生成一个新的Store。

(7)每当store.dispatch发送过来一个新的Action，就会自动调用Reducer,得到新的State。

7.store.subscribe()

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

(2)只要把View的更新函数放到listen,就会实现View的自动渲染（这里的更新函数其实就是Render或者setState）。

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

import { createStore } from 'redux';

const store = createStore(reducer);

store.subscribe(Listener);

let unsubscribe = store.subscribe(() =>

console.log(store.getState());

)

</ p >

接下来会用一张图来表示这些关系