[Day14] React Native - Redux Saga

Create Action

在建立 Saga 之前，我们要先建立对应的 action ，以前一篇 EDIT_USERNAME 为例，当我们发出一个任务後，就会有 SUCCESS 和 ERROR。如此一来就会有三个 actionType :

1. EDIT_USERNAME
2. EDIT_USERNAME_SUCCESS
3. EDIT_USERNAME_ERROR

再来建立一个变更 username 的 action

const export editUsernameAction = payload => ({
  type: 'EDIT_USERNAME',
  payload
});

Create Saga

要建立一个 Saga Function 要使用 general function ，如下：

api

export function editUserApi (payload) {
    return fetch('http://api.com/path/user', {
        method: 'PUT',
        body: JSON.stringfy(payload)
    });
}

// 定义成功的 Action
const editSuccessAction = payload => ({
  type: 'EDIT_USERNAME_SUCCESS',
  payload,
});

// 定义失败的 Action
const editErrorAction = payload => ({
  type: 'EDIT_USERNAME_ERROR',
  payload,
})


export function* editUsernameSaga ({ payload }) {
    try {
        // 发一个 api 请求
        const data = yield call(editUserApi, payload);
        
        const nextAction = data.success
          ? editSuccessAction
          : editErrorAction;
          
        yield put(nextAction(payload));
    } catch(error) {
        yield put(editErrorAction(error));
    }
}

建立好 Saga 之後，要监听 Saga，在 ~/src/sagas/watcher.js 加入：

import { editUsernameSaga } from './userSagas';

function* watchEditUsernameSaga() {
  yield takeLatest("EDIT_USERNAME", editUsernameSaga);
}

export default watchEditUsernameSaga;

将 Saga 加入 middlewares

import { createStore, applyMiddleware, compose } from 'redux';
import createSagaMiddleware from 'redux-saga';

const configureStore = () => {
    const sagaMiddleware = createSagaMiddleware({});
    
    const middlewares = [ sagaMiddleware ]; // 这边弄成一个阵列可以随时扩充
        
    const store = createStore(
        rootReducer,
        compose(applyMiddleware(...middlewares))
    );
    
    return store;
}

const store = configureStore();

export default store;