Redux组成
State（状态）
传递的数据，state可以化为三大类：
- DomainData：服务器的数据，比如接口返回的用户信息，列表资料等
- UI State：决定当前ui样式的状态，比如弹窗显隐值，受控组件
- App State：App级别状态，比如是否请求loading
Action（事件）
action就是把数据从应用传递到store的载体，他是store的唯一来源，我们可以通过 store.dispatch() 将action传递给store。本质就是一个对象。
action的特点：
- action本质就是一个JS普通对象
- action必须要有一个type值来表示要执行的操作
- 多数情况下，type要定义成字符串常量
- 除了type之外，其他的可以自己定义
- action只是描述了要做的事情，并没去更新state
Reducer
reducer本质是一个函数，来响应发送来的actions，然后经过处理，把state发送给store。
在reducer里必须要有return返回值，这样store才会接收到数据。reducer函数会接受两个参数，第一个参数是初始化的state，第二个是action。
Store
store就是把action和reducer联系到一起的对象
主要职责：
- 维持应用的state
- 提供getState()方法获取state
- 提供dispatch()方法发送action
- 通过subscribe()来注册监听
- 通过subscribe()的返回值来注销监听
import {createStore} from 'redux';
const store = createStore(传递reducer)
Redux入门案例
下载Redux
yarn add redux
创建一个Action
- 在根目录下创建一个文件夹“action”
- 在action下创建index.js，构建action
const sendAction = () => { .... }
- 在action里创建函数利用return返回一个action对象， 注意要携带 type 属性值，来表示这个action要做的事
- 导出sendAction函数，可以在别的文件中import使用
创建一个Reducer
- 在根目录下创建一个reducer文件夹
- 在reducer里创建一个index.js，构建reducer，注意reducer要接收两个参数
const rootReducer = (state,action) => {....}
- 函数第一个参数是默认状态，我们可以定义一个初始化的state，然后赋值
const initState = {value:'hello world'}
const rootReducer = (state = initState , action ) => {....}
- 在函数中判断action的type值是否是我们发送的，如果是则可以使用return生成新的state返回
创建一个Store
- 在根目录创建一个store文件夹
- 在该目录下新建index.js文件，用来构建store，注意createStore函数的第一个参数接收的是一个reducer
import {createStore} from 'redux';
const store = createStore(reducer)
- 导入才创建好的reducer，添加到createStore方法中
- createStore的返回值就是我们构建好的store，然后导出可使用
开始使用Store
store.subscribe(() => {
console.log('sub',store.getState())
})
总结：
- 构建action，通过创建一个函数，然后返回一个对象，注意必须要携带一个type属性
- 构建reducer，用来响应action，然后通过return把数据返回给store
- 利用createStore来构建store，构建的时候传递我们写好的reducer
- 利用store.subsribe()注册监听
- 当我们利用store.dispatch()发送一个action的时候就能触发我们的监听了，利用store.getState()就可以拿到我们要的值
React-redux
概述
Redux与react是没有关系的，Redux支持React，angular，jquery甚至原生js。但是redux和react搭配使用更合适！
react-redux是官方出的用于配合react的库，可以更方便的从store中获取数据，更方便高效。
Provider
provider组件可以使整个app都可以获取到store中的数据
- Provider包裹在app跟组件节点最外层，使所有的子组件都可以拿到state
- Provider接收store作为props，然后通过context往下传递，这样使react中任何组件都可以通过context拿到store
Connect
connect方法能让组件和store关联
- Provider内部组件如果想使用state中的数据，就必须要connect进行一层包裹封装，换句话说就是必须要被connect进行加强
- connect就是方便我们组件能获取到store中的state
React-redux的使用
安装
react-redux不是官方提供的，需要构建react项目后自己安装
并且react-redux需要依赖Redux里的store，所以还需要安装redux
yarn add react-redux / npm install react-redux
yarn add redux / npm install redux
构建react项目
如同使用redux，构建好react项目，写好对应的store，reducer，action
导入Provider组件
- 在app.js中导入Provider组件
import {Provider} from 'react-redux'
- 利用Provider组件将我们整个结构进行包裹，并且传递store
function App() {
return (<Provider store={store}>....</Provider>)
}
- 只要我们把store传递给了Provider，那么Provider组件会直接帮我们维护好store
