zoukankan      html  css  js  c++  java
  • redux获取store中的数据

    1.安装redux

    yarn add redux

    2.创建store文件夹,创建store.js

     //引入createStore 模块
    import {createStore} from 'redux'
    //调用createStore 方法
    const store = createStore();
    //导出store
    export default store;

    3.创建reducer.js

    //定义数据
    const defaultState = {
        inputValue:"",
        list:[1,3,2]
    }
    
    // 导出一个方法,这个方法有state和action参数,返回state
    export default (state = defaultState,action)=>{
        return state;
    }

    4.在store.js中引入reducer,并在createStore方法里传入reducer

    //引入reduce.js
    import reducer from './reducer'
    //在createStore方法传入reducer
    const store = createStore(reducer);

    5.在App.js中,引入store,使用store.getState()方法,获取state

    import React, { Component } from 'react';
    import store from './store/store'
    class App extends Component {
      constructor(props) {
        super(props);
        this.state = store.getState();
      }
      render() { 
        return ( 
          <div>
            <input value={this.state.inputValue}/>
            <ul>
              {
                this.state.list.map((ele,index)=>{
                  return (
                    <li key={index}>
                      {ele}
                    </li>
                  )
                })
              }
            </ul>
          </div>
         );
      }
    }
     
    export default App;
  • 相关阅读:
    Puppet部署
    ldap命令
    openldap slapd.conf参数
    ldap objectclass
    ldap 测试表设计
    Nginx/LVS/HAProxy负载均衡软件的优缺点
    SNAT DNAT MASQUERADE 区别
    iptables常用规则
    Python中文注释报错的解决方法
    用Node.js给邮箱发送邮件
  • 原文地址:https://www.cnblogs.com/luguankun/p/11229020.html
Copyright © 2011-2022 走看看