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

我们在这里设定 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>