Redux初體驗

redux是一種對項目進行統一的狀態管理機制，父子組件間通信是通過props屬性值傳遞和子組件回調父組件提前聲明好的方法，整個state只能從上到下，而沒有回溯的能力，redux將所有的state集中到所有組件頂層，然後分發給每個組件自己需要的state，更好的管理狀態,頂層分發狀態，讓React組件被動地渲染,而react hooks解決的是pure render function （渲染函數組件）擁有狀態和生命週期

react-redux 構成

1.store

單一數據源 store 由rootReducer組成，用於最外層組件

import { createStore } from 'redux';
import { Provider } from 'react-redux';
const store = creacteStore(rootReducer);
<Provider store={store}><App /></Provider>

2.rootReducer

rootReducer由多個reducers組成

import { combineReducers } from 'redux';
export default combineReducers({reducerA, reducerB})

3.Reducer

每一個reducer由 oldState(initState) 和 action組成，通過action.type 返回 newState，default 返回oldState

export default function count (state = 0, action) {
  switch(action.type) {
​    case 'count':
​      return state + 1
​    default:
​      return state
  }
}

4.Action

action 可以是一個方法，用於返回對象，也可以直接是一個對象，type屬性是必須的

export function count () {
    return {
    ​    type: 'count'
    }
}

5.conncet

connect 用於連接組件和數據

import { connect } from 'react-redux'
export default connect(mapStateToProps, mapDispatchToProps)(App)

6.mapStateToProps

mapStateToProps 方法用於將狀態映射成屬性，返回組件需要的屬性

const mapStateToProps = (state) => {
    return {
        count: state.count
    }
}

7.mapDispatchToProps

mapDispatchToProps 提供給組件一個屬性用於觸發dispatch，也就是用戶觸發action

const mapDispatchToProps = (dispatch) => {
​    return {
​        addCount: () => dispath(someAction) // dispatch的對象是action
    }
}

react-redux注意點

state = store.getState() // 獲取state

state.count = state.count + 1 // state是隻讀的，只能通過dispatch(action)改變

我寫了一個完整的簡單的 react-redux-count-demo 項目，也是上面演示的列子
參考 Redux 簡明教程和理解 React，但不理解 Redux，該如何通俗易懂的理解 Redux？ - Wang Namelos的回答 - 知乎