我正在学习redux。我正在todo应用程序中对其进行测试。一切正常,但如何在开始时显示保存的待办事项。我已经使用AsyncStorage将todo列表存储在reducer中,并试图在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>
);
答案 0 :(得分:0)
我认为您要寻找的是redux-persist,因此,每次创建存储时,它将尝试使用异步存储来持久化以获取先前的数据,并且在向存储中添加某些内容时,它将坚持使用异步存储。
这是https://blog.reactnativecoach.com/the-definitive-guide-to-redux-persist-84738167975的很好的教程
注意:如果您的异步存储中还没有任何东西,则需要先添加待办事项