redux入门知识

初学redux,对于component,active,reducer,store一头雾水,通过学习下面将对于redux知识做简单的整理,便于日后使用和复习.
Redux (javascript提供的一个可预测性的状态组件,(我们给一个固定的输入,那么必定可以等到一个结果)),Redux集中管理react中多个组件的状态,Redux是一个专门的状态管理库,Redux在Vue中也可以使用,但是在react中比较多.
需求场景:
(1)某个组件的状态需要共享的时候
(2)一个组件需要改变另外一个组件状态的时候
(3)组件的状态需要在任何地方都可以拿到
props用于外部流入的数据,state用于组件间的数据交换以及状态数据.react最大的特点是组件化,不像以前的前端开发,使用了很多的jsp文件,页面间的数据流动比较麻烦.而且通过html,css自己搭建界面也是个费力的活.现在通过各种各样的框架,技术栈,可以方便的进行开发.react的特点是组件化,将整个界面布局分为几个部分,每个部分是一个组件.我们要研究的是组件间的数据的管理与流向.
由上图可知,store统一管理整个项目中的数据state,页面中的组件想要提交获取数据,通过触发action,调用store里的函数
store.dispatch(实现在组件文件中导入store)发送action=>store.dispatch(action),一旦发送就会触发reducer函数执行,reducer通过action里面的type属性区分你发送的是哪一个action,拿到action通过自己的逻辑处理,处理发送来的数据,把最新的值通过return返回给store=>(return state),store通知页面,新的数据来了.你需不需要改变,需不需要获取.页面通过store.subscribe()注册监听数据的变化,只要新的数据来了,我们就可以通过store.getstate.value获取到最新的数据值.这就是组件获取数据的方法.整个流程自成一环.那么reducer和store如何关联,否则store收不到reducer返回的数据.答案是在创建store的时候,通过creatstore(你写的reducer文件)建立关联.
注意:使用redux需要这几类文件
(1)action文件(常用在action下新建index文件)->声明有哪些行为类型,必须有type属性,便于reducer根据type进行处理.action只声明不处理.
(2)reducer文件->根据action发送来的请求,根据type属性进行数据的处理.
(3)store文件->创建store,将reducer和store进行关联,存储管理数据,便于页面读取
(4)component(home)->根据store.dispatch(action)发送行为, 提交状态变化.通过store.subscribe()注册监听.通过store.getstate.value从store中获取新变化的数据.
具体步骤:
1.构建action,通过创建一个函数,然后返回一个对象,注意需要携带type属性.
2.构建reducer,用来响应action,然后通过return把数据传给store
3.利用creatstore来构建store,构建的时候传递我们写好的reducer
4.利用store.subscribe()注册监听
5.当我们利用store.dispatch(action)发送一个action的时候就能触发我们的监听了.在里面利用store,getstate()就能拿到数据.
小型redux demo

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import {createStore} from 'redux';

//reducer,初始化数据,并且更改数据
let reducer = function(state={num:0},action){
  switch(action.type){
    case "add":
       state.num++;
       break;
    case "dec":
       state.num--;
       break;
    default:
       break;
  }
  //处理完成以后返回新的数据state
  return {...state}
}

//store创建仓库
const store = createStore(reducer);

//Action,将视图触发的行为分发给reducer处理
function add(){
  store.dispatch({type:"add"});
}
function dec(){
  store.dispatch({type:"dec"});
}

//自定义组件函数计数器,界面
let Counter = function (){
  return (
  <div>
    <div>计数器的值为:{store.getState().num}</div>
    <button onClick={add}>值加1</button>
    <button onClick={dec}>值减1</button>
  </div>
  )
}
ReactDOM.render(<Counter />,document.querySelector('#root'));
//监听数据,每次数据变化都进行界面的渲染
store.subscribe(()=>{
  ReactDOM.render(<Counter />,document.querySelector('#root'));
})