zoukankan      html  css  js  c++  java
  • [Redux] Store Methods: getState(), dispatch(), and subscribe()

    console.clear();
    const counter = (state = 0, action) => {
      switch (action.type) {
        case 'INCREMENT':
          return state + 1;
        case 'DECREMENT':
          return state - 1;
        default:
          return state;
      }
    } 
    
    // Create a store
    const {createStore} = Redux;
    // Store hold the state, can accept a reducer function
    const store = createStore(counter);
    
    let currentState = store.getState();
    console.log(currentState); // 0
    
    store.dispatch( {type: 'INCREMENT'} );
    console.log(store.getState()); // 1
    
    store.subscribe( () => {
      document.body.innerText = store.getState();
    });
    
    document.addEventListener('click', ()=>{
      store.dispatch( {type: 'INCREMENT'} );
    })

    If we run we will miss the first init state, it starts from '2'...

    So we need to call it before subscribe:

    console.clear();
    const counter = (state = 0, action) => {
      switch (action.type) {
        case 'INCREMENT':
          return state + 1;
        case 'DECREMENT':
          return state - 1;
        default:
          return state;
      }
    } 
    
    // Create a store
    const {createStore} = Redux;
    // Store hold the state, can accept a reducer function
    const store = createStore(counter);
    
    let currentState = store.getState();
    console.log(currentState); // 0
    
    store.dispatch( {type: 'INCREMENT'} );
    console.log(store.getState()); // 1
    
    const render = ()=> {
      document.body.innerText = store.getState();
    }
    render();
    store.subscribe( render);
    
    document.addEventListener('click', ()=>{
      store.dispatch( {type: 'INCREMENT'} );
    })
  • 相关阅读:
    redis订阅发布功能
    redis基础知识
    Redis安装启动(linux系统)
    Mysql之Linux中mariadb主从复制
    nginx+vue+uwsgi+django的前后端分离项目部署
    supervisor进程管理工具
    nginx+uwsgi+django
    uwsgi模块以参数形式运行项目
    nginx之启停操作及配置文件语法检测
    nginx配置之负载均衡
  • 原文地址:https://www.cnblogs.com/Answer1215/p/4993492.html
Copyright © 2011-2022 走看看