react-redux学习

什么时候需要redux

1. 一个组件需要共享它的状态给好几个组件
2. 一个组件的状态改变发生的属性(props)传递，需要横过好几个组件

并非所有的 React 应用程序都需要使用 Redux 的。
如果你不确定是否使用 Rudex ，那么你就是不需要的。

redux基础概念

Action

action 是一个具有 type 字段的普通 JavaScript 对象。你可以将 action 视为描述应用程序中发生了什么的事件.

type 字段是一个字符串，给这个 action 一个描述性的名字

payload 字段有关发生的事情的附加信息

一个典型的 action 对象可能如下所示：

const addTodoAction = {
  type: 'todos/todoAdded',
  payload: 'Buy milk'
}

Action Creator

action creator 是一个创建并返回一个 action 对象的函数。它的作用是让你不必每次都手动编写 action 对象：

const addTodo = text => {
  return {
    type: 'todos/todoAdded',
    payload: text
  }
}

 

Reducer

reducer 是一个函数，接收当前的 state 和一个 action 对象，必要时决定如何更新状态，并返回新状态。

函数签名是：(state, action) => newState。 

你可以将 reducer 视为一个事件监听器，它根据接收到的 action（事件）类型处理事件。

 

下面是 reducer 的小例子，展示了每个 reducer 应该遵循的步骤：

const initialState = { value: 0 }
 
function counterReducer(state = initialState, action) {
  // 检查 reducer 是否关心这个 action
  if (action.type === 'counter/increment') {
    // 如果是，复制 `state`
    return {
      ...state,
      // 使用新值更新 state 副本
      value: state.value + 1
    }
  }
  // 返回原来的 state 不变
  return state
}

 

Store

当前 Redux 应用的状态存在于一个名为 store 的对象中。

store 是通过传入一个 reducer 来创建的，并且有一个名为 getState 的方法，它返回当前状态值

 

Dispatch

Redux store 有一个方法叫 dispatch。

每当 dispatch 一个 action 后，store 就会调用 root reducer

更新 state 的唯一方法是调用 store.dispatch() 并传入一个 action 对象。

store 将执行所有 reducer 函数并计算出更新后的 state，调用 getState() 可以获取新 state。

store.dispatch({ type: 'counter/increment' })
 
console.log(store.getState())
// {value: 1}

 

dispatch 一个 action 可以形象的理解为 "触发一个事件"。

发生了一些事情，我们希望 store 知道这件事。

Reducer 就像事件监听器一样，当它们收到关注的 action 后，它就会更新 state 作为响应。

我们通常调用 action creator 来调用 action：

const increment = () => {
  return {
    type: 'counter/increment'
  }
}
 
store.dispatch(increment())
 
console.log(store.getState())
// {value: 2}

 

 

为什么需要react-redux

如果只使用redux包，那么每个组件都要去导入，订阅，取消订阅store，非常麻烦使用reac-redux包就比较方便

react-redux还是依赖redux中的store，所以项目还要同时安装redux

react-redux重要部分

Provider-组件

使你整个app都能获取到store中的数据

包裹在根组件最外层，使所有组件都能拿到state

import React from 'react'
import { render } from 'react-dom'
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')
)

　　

connect-方法

使组件跟store来进行关联

使组件能获取到store中的state