react redux-蒲公英云

react redux

redux
    store:数据仓库,保存数据的地方
    state:一个对象,数据库里的所有数据都放到一个state
    action:一个动作,触发数据改变的方法,包含dispacth传入数据,action.键名获取
    dispatch:将动作触发方法
    reducer:一个函数,获取动作,改变数据,生成一个新的状态,从而改变页面
    安装
    cnpm install redux --save
    引入
    import Redux,{createStore} from 'redux'
    1、创建仓库
    //state为初始数据,通过action内的参数来做逻辑判断，改变state
    const reducer=function(state={num:0},action)
    {
      //对动作选择
      switch(action.type)
      {
        case "add":
          state.num++;
          break;
        case "substract":
          state.num--;
          break;
      }
    //返回新的状态,将数据解构,改变hash值
      return {...state}
    }
    const store=createStore(reducer)
    2、创建方法,使用dispatch修改/传入数据
        function xx()
        {
          //通过仓库的方法dispatch触发方法,传入{键值对到action里}
             store.dispatch({type:'substract',xx})
        }
    3、将方法绑定事件,从而通过事件可以利用dispatch修改action的内容
    4、组件中获取最终数据
        let xx=store.getSate()
        xx.state中的键名
    5、监听事件改变state,并每次重新渲染页面
    store.subscribe(()=>{
        ReactDOM.render(<组件名 />, document.getElementById('root'));
    })

代码示例:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import Redux,{ createStore} from 'redux'
//仓库,函数获取动作,改变状态,返回新的状态
const reducer=function(state={ num:0},action)
{ 
  //对动作选择
  switch(action.type)
  { 
    case "add":
      state.num++;
      break;
    case "substract":
      state.num--;
      break;
  }
//返回新的状态,将数据解构,改变hash值
  return { ...state}
}
//创建仓库,仓库是一个函数
const store=createStore(reducer)
function add()
{ 
    //通过仓库的方法dispatch触发方法
    store.dispatch({ type:'add',content:'hello'})
}
function substract()
{ 
  //通过仓库的方法dispatch触发方法
     store.dispatch({ type:'substract'})
}
 class Counter extends React.Component
{ 
    //获取数据
render(){ 
        let state=store.getState()
  return(
    <div>
      <h1>计数器:{ state.num}</h1>
      <button onClick={ add}>计数+1</button>
      <button onClick={ substract}>奇数-1</button>
    </div>
    )
}
}
ReactDOM.render(<Counter />, document.getElementById('root'));
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();
//监听数据变化并渲染
store.subscribe(()=>{ 
ReactDOM.render(<Counter />, document.getElementById('root'));
})