redux saga Immutable persistGate 架构搭建 - ImVeryGood/Loan GitHub Wiki

redux+saga+Immutable+persistGate 架构搭建

步骤：

1. 创建action文件夹

1.1创建actionTypes.js 文件用来定义action types

export const actionTypes = {
    NEWS: "NEWS",
    NEWS_SAGA: "NEWS_SAGA"
};

1.2创建自己的action（自己所对应模块的action，比如我的新闻模块创建news_action.js） 比如创建一个news_action.js

import { actionTypes } from "./actionTypes";

const getNewsData = () => {
  return {
    type: actionTypes.NEWS
  };
};
export const news_action = {
  getNewsData
};

1.3创建一个index_action.js 导出所有的action 用于bindActionCreators

import { news_action } from "./news_action";

module.exports = {
  ...news_action
};

在mapDispatchToProps使用：

const mapDispatchToProps = dispatch => {
  return {
    actions: bindActionCreators(index_action, dispatch)
  };
};

2. 创建reducers文件夹

2.1 创建对应模块的reducer用于state的接收（我的模块为新闻，就创建news_reducer.js）

import { actionTypes } from "../action/actionTypes";
import { fromJS, Map } from "immutable";

const initState = Map({
  news: "你好"
});
const news_reducer = (state = initState, action) => {
  switch (action.type) {
   case actionTypes.NEWS_SAGA:
      console.log("reducer=" + action.news_saga);
      return state.set("news", action.news_saga);
    default:
      return state;
  }
};
export default news_reducer;

2.2 创建index_reducer.js,用于合并各个模块的reducer， combineReducers是redux中的合并reducer，导出在configStore.js 中使用

import { combineReducers } from "redux";
import news_reducer from "./news_reducer";

const indexReducers = combineReducers({
  news_reducer: news_reducer
});
export default indexReducers;

3. 创建saga文件夹

3.1创建对应模块所需的saga.js 文件，（我的模块为新闻，所有创建news_saga.js）

import {
  put,
  call,
  takeLatest,
  takeEvery,
  fork,
  take,
  select
} from "redux-saga/effects";
import { actionTypes } from "../action/actionTypes";
function* getNews() {
  while (true) {
    yield take(actionTypes.NEWS);
    yield put({
      type: actionTypes.NEWS_SAGA,
      news_saga: Math.random(100 - 1)
    });
  }
}
//导出
export default function* root(): any {
  yield fork(getNews);
}

3.2创建index_saga.js 用于统一导出所有模块的saga

import { fork } from "redux-saga/effects";
import news_saga from "./news_saga";
export default function* rootSaga() {
  yield fork(news_saga);
}

4. 创建store文件夹

4.1创建configStore.js

import createSagaMiddleware from "redux-saga";
import { applyMiddleware, createStore, compose } from "redux";
import indexReducers from "../reducers/index_reducer";
import rootSaga from "../saga/index_saga";
import storage from "redux-persist/lib/storage";
import { persistReducer, persistStore } from "redux-persist";
import immutableTransform from "redux-persist-transform-immutable";
const persistConfig = {
  transforms: [immutableTransform()],
  key: "root",
  storage
};
const persistedReducer = persistReducer(persistConfig, indexReducers);
const sagaMiddleware = createSagaMiddleware();
//设置多个中间件
const middleWares = [sagaMiddleware];
const enhances = [applyMiddleware(...middleWares)];
const store = createStore(persistedReducer, compose(...enhances));
sagaMiddleware.run(rootSaga);
const persistor = persistStore(store);
module.exports = {
  store,
  persistor
};

5. 配置

5.1 在App.js

import React, { Component } from "react";
import Navigations from "./src/screens/base/Navigations";
import { Provider } from "react-redux";
import { store, persistor } from "./src/store/configStore";
import { PersistGate } from "redux-persist/integration/react";
type Props = {};
export default class App extends Component<Props> {
  onBeforeLift = () => {
// take some action before the gate lifts
  };
  render() {
return (
  <Provider store={store}>
    <PersistGate persistor={persistor} loading={this.onBeforeLift()}>
      <Navigations />
    </PersistGate>
  </Provider>
);
  }
}

6.使用（News.js）

6.1创建mapStateToProps，mapDispatchToProps建立连接

mapStateToProps：

const mapStateToProps = state => {
  console.log("state=" + JSON.stringify(state));
  return {
data: state.news_reducer.get("news")
  };
};

mapDispatchToProps：

const mapDispatchToProps = dispatch => {
  return {
actions: bindActionCreators(index_action, dispatch)
  };
};

建立连接：

module.exports = connect(
  mapStateToProps,
  mapDispatchToProps
)(News);

News.js:

class News extends React.Component {
  constructor(props) {
   super(props);
  }
  componentDidMount() {}
  _getNews() {
console.log("触发");
this.props.actions.getNewsData();
  }
  render() {
const { data } = this.props;
return (
  <View>
    <TouchableOpacity onPress={() => this._getNews()}>
      <Text>{data}</Text>
      <Text>121121</Text>
    </TouchableOpacity>
  </View>
);
  }
}

const styles = StyleSheet.create({});
const mapStateToProps = state => {
  console.log("state=" + JSON.stringify(state));
  return {
data: state.news_reducer.get("news")
  };
};
const mapDispatchToProps = dispatch => {
  return {
actions: bindActionCreators(index_action, dispatch)
  };
};
module.exports = connect(
  mapStateToProps,
  mapDispatchToProps
)(News);
⚠️ **GitHub.com Fallback** ⚠️