iT邦幫忙

2021 iThome 鐵人賽

DAY 26
0
Modern Web

React Native & Redux 初步探討系列 第 26

Day 26 設定 Redux 環境

第 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;
}

我們在這裡設定 todoReducerinitState,並給予 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>

上一篇
Day 25 Redux 介紹
下一篇
Day 27 Redux 接入 component
系列文
React Native & Redux 初步探討33

尚未有邦友留言

立即登入留言