第 26 天 !

今天我們來試著把 redux 的環境建立起來吧，

安裝 redux 套件：

yarn add redux

redux 本身是獨立的套件，是可以用在任何環境的，

所以要使用到 react ， 我們必須在安裝 react 相關的套件，

yarn add react-redux

那我們在專案裡要建立 redux 的環境要有以下這些：

store

使先要先介紹 createStore function

這是 redux 提供的核心 function ，

是來建立 redux store 的

const store = createStore(reducer,[preloadedState], [enhancer])

reducer

要執行的 reducer function

preloadedState

設定初始值，假如不設定會以 reducer 返回的 state 當成是 initial state

enhancer

增強器，提供外部客製化， redux 提供的增強器就是 middleware

我們先在專案的 src 裡，建立一個 store 資料夾，
在資料夾裡建立 configureStore.js

import { createStore } from 'redux';
import rootReducer from '../reducers';

export default function configureStore() {
  return createStore(rootReducer);
}

因為我們沒有特別要去設定 state 以及 middleware，

所以目前我們只需要把 reducer 給導入到 createStore

reducer

在 redux 裡， 可以根據不同的邏輯狀況可以建立不同的 reducer ，

那最後再用 combineReducers 把所有的 reducer 集中在一起就好了，

combineReducers(reducers)

reducers 是一個 object ， 把我們所有的 reducer 放入這個 object ， combineReducers 會幫我們組合成一個 rootReducer

like:

 combineReducers({reducer1 , reducer2 , ....reducers});

我們先在 src 底下建立 reducers 資料夾， 再建立一個 index.js & todoReducer.js

todoReducer.js:

const initState = {
  list: [],
};

export default function todoReducer(state = initState, action) {
  return state;
}

我們在這裡設定 todoReducer 的 initState，並給予 todoReducer 當做初始值

因為目前沒有任何的 action ，就只需要返回 state

index.js:

import { combineReducers } from 'redux';
import todoReducer from './todoReducer';

export default combineReducers({ todoReducer });

我們在這裡組合所有的 reducer

那要如何把 store 導入到 react 裡呢？

我們從 react-redux 載入 Provider

並且用在 App component 裡，

• 導入 store

import configureStore from 'store/configureStore';

const store = configureStore();

• 導入 Provider

// 怕 Provider 太容易重名，加上前綴
import {Provider as ReduxProvider} from 'react-redux';

• 使用 Provider 放入 store

<ReduxProvider store={store}>
  <SafeAreaView style={styles.root}>
    <Header
      searchList={this.searchList}
      createToDoItem={this.createToDoItem}
      handleCompleteAll={this.handleCompleteAll}
    />
    <FlatList
      data={list.filter((item) => item.text.includes(filterKey))}
      renderItem={({ item, index, separators }) => {
        const isEven = index % 2 === 0;
        const isDone = item.status === 'done';
        return (
          <ToDoItem
            isEven={isEven}
            isDone={isDone}
            text={item.text}
            onPress={this.changeItemStatus(item.id)}
          />
        );
      }}
      keyExtractor={(item) => item.id}
    />
  </SafeAreaView>
</ReduxProvider>