Первоначально считывайте сохраненные данные в реагировать на нативный и избыточный - PullRequest
Новая
       6

Первоначально считывайте сохраненные данные в реагировать на нативный и избыточный

0 голосов
/ 19 сентября 2018

Я учу редукцию.Я тестирую его в приложении todo.Все отлично работает, но как я могу отобразить сохраненные задачи в начале.Я использовал AsyncStorage для хранения списка задач в редукторе и пытался прочитать их в функции mapstatetoProps, но тщетно.Как мне это сделать.Спасибо

магазин 

import { createStore } from "redux";
import rootReducer from "../reducers";
export default (store = createStore(rootReducer));

редуктор 

let nextId = 0;
let newState = [];

saveTodos = newToDos => {
  const saveTodos = AsyncStorage.setItem(
    "savedToDoList",
    JSON.stringify(newToDos)
  );
};

const todos = (state = [], action) => {
  switch (action.type) {
    case "ADD_TODO":
      newState = [
        ...state,
        {
          id: nextId++,
          text: action.todo,
          completed: false
        }
      ];
      this.saveTodos(newState);
      return newState;
    case "TOGGLE_TODO":
      return state.map(
        todo =>
          todo.id === action.id ? { ...todo, completed: !todo.completed } : todo
      );
    default:
      return state;
  }
};

visibleTodo.js 

const mapStateToProps = state => {
  return {
    todoss: state.todos
  };
};

const mapDispatchToProps = dispatch => ({
  toggleTodo: id => dispatch({ type: "TOGGLE_TODO", id })
});

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(ToDoList);

ToDoList.js 

const ToDoList = ({ todoss, toggleTodo }) => (
  <View style={{ padding: 20 }}>
    {todoss.map(todo => (
      <TouchableOpacity key={todo.id} onPress={() => toggleTodo(todo.id)}>
        <Text
          style={{
            fontSize: 16,
            color: "gray",
            textDecorationLine: todo.completed ? "line-through" : "none"
          }}
        >
          {todo.id + 1 + ". " + todo.text}
        </Text>
      </TouchableOpacity>
    ))}
  </View>
);

1 Ответ

0 голосов
/ 19 сентября 2018

Я думаю, что вы ищете redux-persist , поэтому каждый раз, когда вы создаете свой магазин, он будет пытаться сохраниться с асинхронным хранилищем, получая предыдущие данные и когда вы добавляете что-то в свой магазин,оно будет сохранено в асинхронном хранилище.

Вот очень хороший учебник для этого https://blog.reactnativecoach.com/the-definitive-guide-to-redux-persist-84738167975

Примечание : если у вас ничего нет в асинхронном режимехранилища, вам нужно сначала добавить задачу

...