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;
  • 相关阅读:
    pyVmomi入门
    一个简单的web框架实现
    H3C交换配置PBR最佳实践
    jQuery入门第三
    jQuery入门第二
    JS笔记 入门第四
    JS笔记 入门第三
    JS笔记 入门第二
    day16
    python之路-DAY10
  • 原文地址:https://www.cnblogs.com/luguankun/p/11229020.html
Copyright © 2011-2022 走看看