背景

Redux 是個全域的狀態管理物件。 它的idea 是來自於flux的架構。 我們需要Redux 因為當我們的react app 越來越大的時候， 狀態會變得很難管理。 尤其是當爸爸組件要分給兩個兒子爸爸的state。 然後state，又要傳來傳去得很麻煩。 為了解決這個問題，我們需要一個全域的狀態管理器。

現在有Redux 我們要把我們有共同有的狀態放進Redux裡面。 那當redux裡面的state有更新，其他的元件都也會自動更新。

教學

那以下的教學我會用我的 Recipe App 來demo， 這個 app就跟一般的CRUD很類似。使用者可以增加自己喜歡的食譜。

1. 我們要先識別Action Type

   //Action Type
   export const ADD_RECIPE = 'ADD_RECIPE';
   

2. 然後我可以呼叫我們action，還有帶需要的參數(payload)

// action.js
export const addRecipe = recipe => ({ type: types.ADD_RECIPE, recipe })

3. 透過reducer來把改變的質傳到我們的state。 現在我們的state更新了， 那所有的component呼應到這個State 就會更新了

//reducer_recipes.js
const initialState = [
  {name: 'Sushi', ingredients: ['3 tablespoons rice vinegar', '4 sheets nori (dry seaweed)', '1/2 cucumber, sliced into thin strips']},
  ...
];

export default function(state = initialState, action){
  switch (action.type) {
    case ADD_RECIPE:
      return [
        ...state
        ,
        {
        name: action.recipe.name,
        ingredients: action.recipe.ingredients
        }
      ]
    default:
      return state
  }
}

// reducers/index.js
// Now we export our reducers.
const rootReducer = combineReducers({
  recipes
});

export default rootReducer;
//index.js
const store = createStore(reducer);
ReactDOM.render(
  <Provider store={store}>
  <App />
  </Provider>,
  document.getElementById('root')
);

以下的圖顯示Redux的流程， 然後我也會在下面貼上我用redux的兩個專案。

接下來我會來介紹如何把react 跟 redux 結合。

連結

• My Netflix redux example
• My FCC Recipebox example