redux总结

redux总结

demo总结

1.demo目录结构

|-- package.json                //项目依赖
|-- README.md               //总结文档
|-- public                   //公共文件夹
|   |-- index.html              //html文件
|-- src                     //项目源码
    |-- actions.js              //定义action(store方法操作)
    |-- index-demo-store.js      //项目入口js(store方法操作)
    |-- index-demo1.js      //demo-count项目入口(demo-count)
    |-- index-react-redux.js    //react-redux示例项目入口(demo-count-2)
    |-- index.js                //react-redux-demo项目入口
    |-- reducers.js           //reducers文件(store方法操作)
    |-- demo-count          //countdemo目录
    |   |-- action.js            //action文件
    |   |-- Count.js            //count组件
    |   |-- reducer.js          //reducer文件
    |-- demo-count-2         //react-redux-demo目录
        |-- reducers.js       //reducers文件
        |-- components      //容器组件目录
        |   |-- App.js            //容器组件
        |-- ui                //ui组件目录
            |-- Count.js          //ui组件

2.demo简介

demo主要利用了react+react-redux实现ui组件与逻辑处理组件分离的功能，由redux的store来保存state,由reducers负责处理数据，由action负责定义用户的行为。

 

3.demo演示

redux笔记

1.为什么使用Redux？

2. Redux工作原理

3.什么时候使用Redux

REDUX是一种状态管理工具，它利用store来存储状态，以便各个组件使用，实现了组件之间的通信，并且由于数据是全局的，方便统一管理。

 

三大原则

1.单一数据源：整个应用的state存储在store中，并且store是唯一的。

2.state是只读的：不能修改state数据，只能通过dispatch(action)改变state，action是描述用户行为的对象。

3.使用纯函数来修改：通过传递action到reducers函数来改变state，且reducers必须是纯函数，不能有副作用

 

基础概念

1.action

用来描述用户的行为，用户在视图的每个操作都会传递action到dispatch中，以此改变state，重新渲染视图。

action是对象，其中必须要有type属性，其余的可以自己定义。

const action = {
  type: 'ADD_TODO',       //添加任务
  payload: 'Learn Redux'  //学习redux的任务
};

action creator

View 要发送多少种消息，就会有多少种 Action。如果都手写，会很麻烦。可以定义一个函数来生成 Action，这个函数就叫 Action Creator。
const ADD_TODO = '添加 TODO';
​
function addTodo(text) {
  return {
    type: ADD_TODO,
    text
  }
}
​
const action = addTodo('Learn Redux');

 

2.reducer

reducer是纯函数，作用是把action中的数据发送到store中，reducer函数接收旧的state，action，通过action的type来决定返回新的state。

//第一个参数表示旧的状态，在创建store时会自动调用dispatch方法来给store赋予初始的state值，该值就是这里的state
//第二个参数表示用户的action行为，例如点击按钮然后调用了dispatch方法将action传递到了这里，通过action的type决定如何返回新的state值，保存在store当中。通过监听器来重新渲染视图。
function todos(state = [], action) {
  switch (action.type) {
    case ADD_TODO:
      return [
        ...state,
        {
          text: action.text,
          completed: false
        }
      ]
    case TOGGLE_TODO:
      return state.map((todo, index) => {
        if (index === action.index) {
          return Object.assign({}, todo, {
            completed: !todo.completed
          })
        }
        return todo
      })
    default:
      return state
  }
}

 

3.store

store是管理state的仓库，用来连接reducer和action，store有以下几个功能。

注意：一个redux只能有一个store，但是可以有多个reducer

• 维持应用的 state；

• 提供 getState() 方法获取 state；

• 提供 dispatch(action) 方法更新 state；

• 通过 subscribe(listener) 注册监听器;

• 通过 subscribe(listener) 返回的函数注销监听器。

 

通过reducer来创建store

let store = createStore(todoApp)

 

4.数据流

redux应用遵守下面四个步骤

 

1.调用store.dispa(action)

这个方法可以在任何地方调用，把store当做参数传递给子组件，这样便能进行组件间的通信

 

2.Redux store 调用传入的 reducer 函数。

当执行了store.dispatch(action)后，store会调用创建store时传入的reducer函数，并传入两个参数，一个是当前store存储的state，一个是用户发起的action

// 当前应用的 state（todos 列表和选中的过滤器）
 let previousState = {
   visibleTodoFilter: 'SHOW_ALL',
   todos: [
     {
       text: 'Read the docs.',
       complete: false
     }
   ]
 }
​
 // 将要执行的 action（添加一个 todo）
 let action = {
   type: 'ADD_TODO',
   text: 'Understand the flow.'
 }
​
 // reducer 返回处理后的应用状态
 let nextState = todoApp(previousState, action)

 

3.根 reducer 应该把多个子 reducer 输出合并成一个单一的 state 树。

 function todos(state = [], action) {
   // 省略处理逻辑...
   return nextState
 }
​
 function visibleTodoFilter(state = 'SHOW_ALL', action) {
   // 省略处理逻辑...
   return nextState
 }
​
 let todoApp = combineReducers({
   todos,
   visibleTodoFilter
 })

当触发 action 后，combineReducers 返回的 todoApp 会负责调用两个 reducer：

 let nextTodos = todos(state.todos, action)
 let nextVisibleTodoFilter = visibleTodoFilter(state.visibleTodoFilter, action)

然后会把两个结果集合并成一个 state 树：

 return {
   todos: nextTodos,
   visibleTodoFilter: nextVisibleTodoFilter
 }

 

4.Redux store 保存了根 reducer 返回的完整 state 树。

此时store中的state已经更新成了最新的state树。

当我们调用store.suscribe(listener)时，会监听到state的变化，使用store.getState()获取最新的状态树。

 

react-redux的使用

react-redux将组件分为两类UI组件和容器组件

UI组件负责UI的展现，不处理任何业务逻辑，所有的数据通过(this.props)传递

容器组件负责管理数据，处理业务逻辑，不负责UI的展现

 

当一个组件既有UI组件又有容器组件时，将它拆分成下面的结构：外面是一个容器组件，里面包了一个UI 组件。前者负责与外部的通信，将数据传给后者，由后者渲染出视图。

 

1.connect()

react-redux提供connect方法,用于将UI组件包装成容器组件

import { connect } from 'react-redux'
const VisibleTodoList = connect()(TodoList);

单纯的connect()方法只是单纯将UI组件进行包装，但是没有进行逻辑处理，与数据管理，为了定义业务逻辑，需要两个方面

（1）输入逻辑：外部的数据（即state对象）如何转换为 UI 组件的参数

（2）输出逻辑：用户发出的动作如何变为 Action 对象，从 UI 组件传出去。

 

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

 

2.mapStateToProps()

作用是建立state对象到UI组件的props对象中。

const mapStateToProps = (state) => {
return {
 todos: getVisibleTodos(state.todos, state.visibilityFilter)
}
}

该方法接收state作为参数并返回一个对象，这个对象的键就是UI组件的同名参数,在UI组件中通过this.props.todos可以获取到这个对象的值

mapStateToProps会订阅 Store，每当state更新的时候，就会自动执行，重新计算 UI 组件的参数，从而触发 UI 组件的重新渲染。

 

3.mapDispatchToProps()

作用是将用户的操作与dispatch方法进行映射，也就是说他定义了哪些用户的操作会把action发送到store中。

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

 

4.Provider组件

import { Provider } from 'react-redux'
import { createStore } from 'redux'
import todoApp from './reducers'
import App from './components/App'

let store = createStore(todoApp);

render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

Provider在根组件中定义，这样App的所有子组件都默认可以拿到state

 

总结

一个react应用只能有一个store。

store中的state值key等同于reducer的函数值。

reducer必须为纯函数。

dispatch可以用于任何地方，一般用于用户进行视图操作时，如点击按钮等，然后通过redux数据流最后渲染重新渲染视图。