如果需要在你的react项目当中使用状态管理模式的话,需要引入redux和react-redux两个插件,redux提供基本的功能,react-redux提供将redux注入react的方法。

import React from 'react'
import { render } from 'react-dom'
import { createStore } from 'redux'
import { Provider } from 'react-redux'
import App from './containers/App'
import todoApp from './reducers' let store = createStore(todoApp); let rootElement = document.getElementById('root')
render(
<Provider store={store}>
<App />
</Provider>,
rootElement
)

在渲染之前将根组件包进Provider当中,这样App就是容器组件了,在它里面都可以通过引入store,在当中使用getState,dispatch等redux提供的相关api方法进行操作了

在根组件当中注入相关的state

没有在根组件当中注入的state数据,是不能进行更改的

在react项目当中使用redux的更多相关文章

  1. 如何在非 React 项目中使用 Redux

    本文作者:胡子大哈 原文链接:https://scriptoj.com/topic/178/如何在非-react-项目中使用-redux 转载请注明出处,保留原文链接和作者信息. 目录 1.前言 2. ...

  2. 如何优雅地在React项目中使用Redux

    前言 或许你当前的项目还没有到应用Redux的程度,但提前了解一下也没有坏处,本文不会安利大家使用Redux 概念 首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与 ...

  3. 优雅的在React项目中使用Redux

    概念 首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与React没有任何关系,其他UI框架也可以使用Redux react-redux React插件,作用:方便在 ...

  4. react全家桶从0搭建一个完整的react项目(react-router4、redux、redux-saga)

    react全家桶从0到1(最新) 本文从零开始,逐步讲解如何用react全家桶搭建一个完整的react项目.文中针对react.webpack.babel.react-route.redux.redu ...

  5. 在react项目中使用redux or mobx?

    主要比较参数: 库体积,打包项目体积 开发体验 性能对比 在对比参数前首先分析一下redux和mobx的设计模式,redux和mobx都没有使用传统的mvc/mvvm形式,而且他们使用flux结构也略 ...

  6. 在react项目当中做导航守卫

    距离上一篇文章,似乎已经过去好久了. 确实是最近相对忙了一点,本身是用vue重构之前一个传统的项目,就自己一个人写.而且,在稍微闲暇之余,想着同时用react也重构一遍,也算是对react的学习吧!毕 ...

  7. React项目的最佳实践

    项目代码 从零开始简书项目 ​ 从我第一次接触vue这个框架已经过了快一年的时间,陪伴我从前端小白到前端工程师,前端时间也是使用了 ts+vue这样的组合写代码,明显感觉vue与ts似乎没有产生比较好 ...

  8. 快速搭建react项目骨架(按需加载、redux、axios、项目级目录等等)

    一.前言 最近整理了一下项目骨架,顺便自定义了一个脚手架,方便日后使用.我会从头开始,步骤一步步写明白,如果还有不清楚的可以评论区留言.先大致介绍一下这个骨架,我们采用 create-react-ap ...

  9. React项目使用Redux

    ⒈创建React项目 初始化一个React项目(TypeScript环境) ⒉React集成React-Router React项目使用React-Router ⒊React集成Redux Redux ...

随机推荐

  1. AJAX Control Toolkit的AsynFileUpload控件资料收集

    基于AJAX的文件上传显示进度条实现 http://plkong.iteye.com/blog/238159 asp.net ajax AjaxFileUpload使用 多文件上传 http://bl ...

  2. 【Java】基本数据类型以及其转换

    整理了一下Java基本数据类型和面试可能涉及的知识.      字节数(byte)  位数(bit)  取值范围 整型  byte  1  8  -2^7 ~ 2^7 -1 short   2  16 ...

  3. c++ 作业 10月13日 进制转换最简单方法,控制c++输出格式方法 教材50的表格自己实践一下 例题3.1 setfill() setw()

    #include <iostream> #include <iomanip> using namespace std; int main(){ // int i; // cou ...

  4. django+xadmin在线教育平台(六)

    4-1 使用py3.6和django1.11开发系统前注意事项 直接通过Python3.6和django最新版本来开发我们的系统的一些注意事项. 原版本: Python 2.7 & djang ...

  5. PHP 对象基础知识

    最近开始重新学习对象知识,其实也算是初步深入学习对象和设计模式,希望自己会坚持下去,保持更新 初识PHP对象 还记得,刚开始学习 PHP 的时候,学到到方法和对象时有一个很大的疑问,对象与方法相比较那 ...

  6. JZOJ 3462. 【NOIP2013模拟联考5】休息(rest)

    3462. [NOIP2013模拟联考5]休息(rest) (Standard IO) Time Limits: 1000 ms  Memory Limits: 262144 KB  Detailed ...

  7. ubuntu下vim的简单配置

    该文章只是进行符合自己习惯的最基本的配置,更加高级的配置请参考更加有含量的博文! 1.打开vim下的配置文件 sudo vim /etc/vim/vimrc 2.在这个文件中,会有这么一句:synta ...

  8. oracle 事务 第二弹

    一 数据库版本 SYS@LEO1>select* from v$version; BANNER ------------------------------------------------- ...

  9. 为什么要用枚举实现Singleton--Java

    原文地址:http://www.cnblogs.com/AprilCal/p/5426007.html 理由一:无需再考虑可序列化的情况   <effective java>第77条:对于 ...

  10. Redis实现之服务器

    命令请求的执行过程 一个命令请求从发送到获得回复的过程中,客户端和服务器需要完成一系列操作.举个栗子,如果我们使用客户端执行以下命令: 127.0.0.1:6379> SET KEY VALUE ...