Redux初学篇

Redux

原理

• 定义一个全局的 state对象

const appState = {
	title：{
		text: '《JavaScript 权威指南》',
		color: '#ff0000'
	},
	content: {
		text: '1234567890123456789012345678901234567890',
		colot: '#f0f0f0'
	}
}

• 定义渲染 title 的方法

function renderTitle (title) {
	constdom = $('.title')
    dom.innerHTML = title.text
    dom.style.color = text.color
}

• 定义渲染 content 的方法

function renderContent (title) {
	const dom = $('.title')
    dom.innerHTML = content.text
    dom.style.color = content.color
}

• 定义渲染 app 的方法

function renderApp (state) {
    renderTitle(state.title)
    renderContent(state.content)
}

• 调用方法渲染 app

renderApp(appState)

• 约定 更新状态数据需要在一个统一的一个方法
  • reducer()方法中更新状态
  • 类似于 Vuex中的mutation
  • 通过参数action来表示更新状态的动作
  • action是一个普通的对象，有两个属性：type 和 payload
  • type 属性标识更新状态时的动作类型, mutition中的函数名
  • payload 属性标识更新状态时有效载荷(更新后的数据)

function reducer (state,action) {
  switch(action.type) {
         case 'UPDATE_TITLE_TEXT': //  修改标题文本
         	state.title.text = action.payload
         	break
         case 'UPDATE_TITLE_COLOR': // 修改标题的yanse	
         	state.title.color = action.payload
         	break
         default:
         	break
  }
}

• 修改文本内容

$('.modify-title-text').addEventListener('click', ()=>{
    //调用 reducer 方法 实现状态更新
    reducer(appState, {
        type: 'UPDATE_TITLE_TEXT',
        payload: '  《JS》'
    })
    // 修改页面后，重新渲染页面
    renderApp(appState)
},false)

• 修改页面后，重新渲染页面

升级

• 定义一个方法 创建 store

function createStore(state, reducer) {
    // 获取最新的状态
    const getState = () => state
    //  分发action 将action发送到 reducer中实现状态更新
    const deispatch = action => reducer(state, actions)
    
    return {
        getState,
        dispatch
    }
}

• 使用

//  创建一个 Store 对象
const store = createStore(appState, reduce)

HOC （heigher-order component）

高阶组件higher 本质就是 一个函数，，该函数传递一个组件作为参数，返回一个新的组件。通常返回的新组建是在源组件的基础上做过的组件。这其实是装饰者设计模式。

概念：

• store 仓库，将 state 与更新 state 的动作包装在一起。
• state 状态，数据
• action 是一个普通数据对象，表明状态更新的动作。通常有两个属性：type和 payload
• reducer 是一个纯函数，主要用于更新状态，传递 state 与action 作为参数，返回更新后的新的状态数据。
  • reducer 函数是唯一能修改状态的地方，并且是通过 dispatch() 来分发 acrion 调用 reducer（）更新状态
• dispatch 分发action 实现更新状态

Redux 三大原则

• 单一数据源。整个应用的 state 都被存储早一个名为 store 的 object树中。
• **Store中的 state 是只读的。**只能通过触发 Action，通过封装Reduce，利用 dispatch.action()来修改存储在 Store中的state。
• **使用纯函数来修改执行 state。**即在 Reducer 中修改state。 Reducer 接受两个参数：旧的 state 和 Action，返回一个新的 state。

安装

npm install --save redux
npm install --save react-redux

react-redux绑定库

redux 与 react 并没有直接关系，但两者配合使用最好，在 redux 包中并不包含绑定库，需要单独安装

Redux使用方法

• 通过 Redux的 createStore()方法来生成 Store。

  • createStore()方法的参数：Reducer 方法
  • 可以用 combinReducers方法将多个Reducer合并

• Reducer方法参数：state 和 Action

• 生成 store 仓库后，需要 subscribe方法注册回调函数 listener

  这样 store 内的 state 发生变化时会自动调用回调函数

  回调函数内可以通过 getState方法获取到最新的 state

生态圈

redux-thunk 用最简单的方式搭建异步 action 构造器

安装：npm install redux-thunk

绑定库的 API

<Provider store>：正常情况下，你的根组件应该嵌套在 <Provider> 中才能使用 connect() 方法。

connect([mapStateToProps], [mapDispatchToProps])：

- 参数：mapStateToProps(state, [ownProps])，如果定义该参数，组件将会监听 store 的变化。任何时候，只要 store 发生改变，mapStateToProps 函数就会被调用。函数必须返回一个纯对象，这个对象会与组件的 props 合并

- 参数：mapDispatchToProps(dispatch, [ownProps])，该参数可以是函数或对象的类型，如果传递的是一个函数，该函数将接收一个 dispatch 函数，然后由你来决定如何返回一个对象。如果传递的是一个对象，那么每个定义在该对象的函数都将被当作 Redux action creator，对象所定义的方法名将作为属性名；每个方法将返回一个新的函数，函数中dispatch方法会将 action creator 的返回值作为参数执行。这些属性会被合并到组件的 props 中。

- connect() 函数的返回值是一个 HOC

异步action

标准做法是引入 redux-thunk 中间件

使用 react + redux +react-redux+ redux-thunk

• 创建 store --调用redux的createStore（）方法
• 编写 reducer– 纯函数，用于更新状态，传递 state 和 action 参数，返回新的state。reducer 内部通常使用 switch-case来判断 action.type 类型，以进行实际状态更新。
• 编写 action-creator – 用于 生成 action 对象， 以便于 dispatch（） 调用时传递 action 对象
• 完善创建 store，
  • 如果要处理异步action，需要引入redux-thunk然后在创建store时应该使用该中间件，
  • 如果 一个应用中有多个独立的reducer，要合并成一个根reducer再使用
  • createStore（reducer, middleware）
• 利用绑定库 （react-redux）中的 组件缓存 store
• 如果在组件中需要获得 store 中的内容，可以使用绑定库中提供的 connect（） 方法来建立组件与store的链接
  • connect（mapStateToProps，mapDispatchToProps）
  • connect（）调用的返回值为 hoc，利用 hoc 为参数组件做功能增强，在 connect 连接时，将 state 及 dispatch 相关属性映射到组件的Prop属性

问题：

• 箭头函数定义的action函数会直接 自动