创建项目步骤:
1.使用npm install create-react-app -g全局安装脚手架
2.create-react-app 项目名,创建一个项目
3.打开项目文件,在src目录下的index.js文件,除了index.js的所有文件都能删掉。
可以改成这样的初始样子:
4.在静态资源目录public里,保留index.html,剩下的都可以删掉,
删成这样
5.进入你前面创建的项目名那,然后输入npm start,启动项目
6.【如果此时没有安装redux,需要安装一下】在index.js中引入import { createStore } from 'redux';
过一遍
store就是存放数据的仓库,createStore()
state是数据仓库中存储的数据,store.getState()
action是一个对象,用来描述当前如何操作state状态
store.dispatch(action)是唯一更改state的方法
reducer是个函数,用来更新当前的state
一般情况下
我们会把常量,比如计数器中的ADD,DELETE定义到contans目录下的ActionTypes.js中
把action的定义代码,放到src目录下actions目录下的actions.js中
reducer函数也需要另建一个reducers目录,起名为math.js
然后index.js中
React-redux中把组件分为UI组件和容器组件:
UI组件负责UI显示,所有数据都由props提供,
容器组件相当于容器把它包裹,负责管理数据和业务逻辑相关东西。
用reat-redux改造以后:
Index.js
Container组件