redux与react-redux记录

redux

概述

redux是一个javascript容器，用于进行全局的状态管理

三大核心

• 单一数据源
  整个应用的state被存储在一个object tree中，并且这个object tree只存在于唯一一个store中
  
• state是只读的
  唯一改变state的方法就是触发action，action是一个用于描述已发生时间的普通对象
  视图和网络请求不能直接去修改state，只表达想要修改的意图。所有的修改都被集中化处理，并且严格按照一个接一个的顺序执行

store.dispatch({type:'add-adtion',index:1})

• 使用纯函数来执行修改
  为了描述action如何修改state tree。需要编写reducers
  reducers只是一些穿黑色农户，它接收先前的state和action，并且返回新的state。可以服用，控制顺序，传入附加参数

组成部分

state

传递的数据：

• DomainDate：服务端数据，比如用户信息，商品列表等
• UI State：决定当前UI展示的状态，比如：弹窗的显示隐藏等
• App State：App级别的状态，请求loading，比如当前路由信息等可能被多个组件使用的到的状态等

action事件

Action是把数据从应用传到store的再提，她是store数据的唯一来源，一般来说，，我们可以通过store.dispatch()将action传递给store

action特点

• 本质就是一个javascript的普通对象
• 内部必须要有一个type属性来表示要执行的动作
• 多数情况下，这个type会被定义成字符串常量
• 除type外，action结构随意定义
• 指标数了要有动作发生，并没有描述如何更新state

//action创建函数
function addAction(par){
// 返回一个action对象
   return{
   		type:'add',
   		...par
   }
}

reducer

本质就是一个函数，用来响应发送过来的actions，然后经过处理，把state发送给store
注意：在reducer函数中，需要return返回值，这样store才能接收到数据。函数会接收两个参数，第一个参数是初始化的state，第二个参数是action

const initState={...};
rootReducer=(state=initState,action)=>{
//
   return{
   }
}

store

store把action与reducer联系到一起的对象
主要职责：

• 维持应用的state
• 提供getState()方法获取state
• 提供dispatch()方法发送action
• 通过subscribe()来注册监听
• 通过subscribe()返回值来注销监听

import {createStore} from 'redux';
const store = createStore(传递reducer)

使用流程

准备工作

构建react项目

npm install -g create-react-app

安装redux

npm install --save redux

开发工作

创建action

• 在根目录创建一个action文件夹
• 在该目录创建index.js文件，用来构建Action

const sendAction=（）=>{}

• 在action创建的函数里面，利用return返回一个action对象

const sendAction=（）=>{
	return{
	type:'send',
	value:'发送一个baction'
   }
}

• 把action创建的函数导出

module.exports={sendAction}

创建reducer

• 在根目录创建一个reducer文件夹
• 在该目录创建index.js文件，用来构建reducer

const toorReducer=（state,action）=>{}

• 在action创建的函数里面，利用return返回一个action对象

const initState={value:'默认值'}
const rootReducer=（state=initState,action）=>{

}

• 在函数里，通过第二个参数action的type来判断是否是需要发送的
• 如果是的话，可以通过return返回新的state

module.exports={sendAction}

• 导出reducer
  创建store
  • 在根目录创建一个store文件夹
  • 在该目录创建index.js文件，用来构建store，接收的第一个参数是reducer

  import {createStore} from 'redux';
  const store = createStore(传递reducer)
  

  • 导入刚刚构建好的reducer，然后设置到函数里
  • createStore的返回值就是构建好的store，然后进行导出

   import {createStore} from 'redux';
   import reducer from '../reducer';
   const store = createStore(reducer )
   export default store 
  

  通过store来监听事件
  • 在组件导入store

    import store from '../../store'
   ```
  - 通过subscribe来进项监听器注册
    ```javascript
    this.unSubscribe=store.subscribe(()=>{})
    	```
  - 通过dispatch来发送action
  ```javascript
  hanClick=()=>{
    store.dispatch(
    	sendAction()
    )
  }
  

  • 通过store.getState()拿值
    

react-redux

概述

react-redux就是Redux官方出的用于配合React的绑定库
react-redux能够使react组件从redux store中很方便的读取数据，并且向store中分发actions以此来更新数据

重要成员

Provider

• Provider包裹在根组件最外层，使所有的子组件都可以拿到state
• Provider接收store作为props，然后通过context往下传递，这样react中任何组件都可以通过context获取到store

connect

• Provider内部组件如果想要使用state中的数据，就必须要connect惊醒一层包裹封装（组件要被connect加强）
• connect就是方便组件能够获取到store中的state

准备

构建react项目

npm install -g create-react-app

安装redux

npm install --save redux
npm install react-redux

开发工作

• 在根目录创建reducer/index.js文件，构建reducer来响应action
• 在根目录创建store/index.js文件，用来构建store，把reducer引入进来

   import {createStore} from 'redux';
   import reducer from '../reducer';
   const store = createStore(reducer)

• 在app.js中引入store，Provider组件，利用Provider组件包裹整个结构

connect方法生成容器组件以后，需要让容器组件拿到state对象，才能生成 UI 组件的参数。
React-Redux 提供Provider组件，可以让容器组件拿到state。

// 导入store、
import store from './store'
import {Provider} from‘react-redux’
function App() {
   return (
   	<Provider store={store}>
   		<div className="App">
   		</div>
   	</Provider>
   );
}
export default App;

• connect使用
  通过connect方法自动生成的容器组件，UI 组件负责 UI 的呈现，容器组件负责管理数据和逻辑。

connect方法接受两个参数：mapStateToProps和mapDispatchToProps。它们定义了 UI 组件的业务逻辑。前者负责输入逻辑，即将state映射到 UI 组件的参数（props），后者负责输出逻辑，即将用户对 UI 组件的操作映射成 Action。

//mapStateToProps() 接收方
//它是一个函数，建立一个从（外部的）state对象到（UI 组件的）props对象的映射关系。mapStateToProps执行后应该返回一个对象，里面的每一个键值对就是一个映射。
// 导入connect 
import { connect } from 'react-redux'
const mapStateToProps = (state) => {
 return {
   todos: getVisibleTodos(state.todos, state.visibilityFilter)
 }
}
// 接收方 需要实现connect方法的第一个参数
export default connect(mapStateToDrops)(组件名);

mapStateToProps是一个函数，它接受state作为参数，返回一个对象。这个对象有一个todos属性，代表 UI 组件的同名参数，后面的getVisibleTodos也是一个函数，可以从state算出 todos 的值。

// mapDispatchToProps() 发送方
//mapDispatchToProps是connect函数的第二个参数，用来建立 UI 组件的参数到store.dispatch方法的映射。它定义了哪些用户的操作应该当作 Action，传给 Store。它可以是一个函数，也可以是一个对象。

//是函数则会得到dispatch和ownProps（容器组件的props对象）两个参数。
//组件中
import { connect } from 'react-redux'
handClick = () => {

       console.log('comA:',this.props)
       //发送action
       this.props.sendAction()
   }
const mapDispatchToProps = (
 dispatch,
 ownProps
) => {
 return {
   sendMsg: () => {
     dispatch({
       type: 'SET_VISIBILITY_FILTER',
       filter: ownProps.filter
     });
   }
 };
}
export default connect(null, mapDispatchToDrops)(comA);
// 发送方 通过dispatch来发送action connect第二个参数

从上面代码可以看到，mapDispatchToProps作为函数，应该返回一个对象，该对象的每个键值对都是一个映射，定义了 UI 组件的参数怎样发出 Action。
是一个对象，它的每个键名也是对应 UI 组件的同名参数，键值应该是一个函数，会被当作 Action creator ，返回的 Action 会由 Redux 自动发出。

const mapDispatchToProps = {
 onClick: (filter) => {
   type: 'SET_VISIBILITY_FILTER',
   filter: filter
 };
}

• 数据流动流程