Как мне заполнить initialState в Redux из AsyncStorage нативного реагирования? - PullRequest
Новая
       30

Как мне заполнить initialState в Redux из AsyncStorage нативного реагирования?

0 голосов
/ 31 октября 2018

У меня есть приложение React Native. Я храню имя пользователя и идентификатор пользователя в AsyncStorage, чтобы им не приходилось каждый раз входить в систему. Как мне заполнить initialState этими значениями. Есть некоторые пакеты, которые делают это для вас, но кажется, что это должно быть выполнимо без накладных расходов другого пакета. Прямо сейчас начальное состояние - просто пустые значения. 

const initialState = {
  uid: "",
  username: "",
};

1 Ответ

0 голосов
/ 31 октября 2018

Вот решение, которое я придумал. Просто создайте действие, которое получает свойства AsyncStorage, и отправьте массив свойств редуктору, где они назначены состоянию. И вы вызываете действие прямо в магазине. Гораздо легче, чем добавить целую другую библиотеку. Для простоты я предполагаю, что весь код Redux находится в одном файле с именем myRedux.js: 

// Imports:
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import { AsyncStorage, } from "react-native";

// Set initial state to empty values:
const initialState = {
  uid: "",
  username: "",
};

// Reducer: 
const reducer = (state = initialState, action) => {
  switch(action.type) {
    case "setInit":
      return { 
        ...state, 
        uid: action.uid,
        username: action.username,
      }

    default: 
      return state;
  }
};

// Store
const store = createStore(reducer, applyMiddleware(thunk));
export { store };

// Action
const setInit = (result) => {
  return {
    type: "setInit",
    uid: result[0][1],
    username: result[1][1],
  };
} 

const getAsyncStorage = () => {
  return (dispatch) => {
    AsyncStorage.multiGet(['uid', 'username'])
    .then((result) => {dispatch(setInit(result))});
  };
};

// Dispatch the getAsyncStorage() action directly on the store.
store.dispatch(getAsyncStorage());

Затем в файлах экрана вы можете получить к ним доступ с помощью mapStateToProps: 

const mapStateToProps = (state) => {
  return {
    uid: state.uid,
    username: state.username,
  };
}

// Access the prop values in the render:
render() {
  return (
    <View>
      <Text>Uid: {this.props.uid}</Text> 
      <Text>Username: {this.props.username}</Text>
    </View>
  );
}

// Connect mapStateToProps to the component class
export default connect(mapStateToProps)(MyScreen);
...