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;
  • 相关阅读:
    git操作说明书
    python之routes入门
    python inspect库
    Python SMTP发送邮件
    Python深入:setuptools进阶
    Python打包之setuptools
    python graphviz的使用(画图工具)
    pathlib的使用
    python tempfile 创建临时目录
    python flake8 代码扫描
  • 原文地址:https://www.cnblogs.com/luguankun/p/11229020.html
Copyright © 2011-2022 走看看