diff --git a/examples/redux/App.js b/examples/redux/App.js new file mode 100644 index 000000000..9712cdf2d --- /dev/null +++ b/examples/redux/App.js @@ -0,0 +1,27 @@ +import React from 'react'; +import { StyleSheet, View, StatusBar } from 'react-native'; +import { Provider } from 'react-redux'; +import configureStore from './store'; +import AddTodo from './components/AddTodo'; +import TodoList from './components/TodoList'; + +const store = configureStore(); + +export default function App() { + return ( + + + + + + + + ); +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + paddingTop: 32, + }, +}); diff --git a/examples/redux/actions/todoActions.js b/examples/redux/actions/todoActions.js new file mode 100644 index 000000000..b83a37153 --- /dev/null +++ b/examples/redux/actions/todoActions.js @@ -0,0 +1,25 @@ +export const actions = { + ADD: '@ADD_TODO', + REMOVE: '@REMOVE_TODO', + MODIFY: '@MODIFY_TODO', + CLEAR: '@CLEAR_TODO', +}; + +export const addTodo = (todo) => ({ + type: actions.ADD, + payload: todo, +}); + +export const removeTodo = (id) => ({ + type: actions.REMOVE, + payload: { id }, +}); + +export const modifyTodo = (todo) => ({ + type: actions.MODIFY, + payload: todo, +}); + +export const clearTodos = () => ({ + type: actions.CLEAR, +}); diff --git a/examples/redux/babel.config.js b/examples/redux/babel.config.js new file mode 100644 index 000000000..4d710acf8 --- /dev/null +++ b/examples/redux/babel.config.js @@ -0,0 +1,6 @@ +module.exports = function (api) { + api.cache(true); + return { + presets: ['module:metro-react-native-babel-preset'], + }; +}; diff --git a/examples/redux/components/AddTodo.js b/examples/redux/components/AddTodo.js new file mode 100644 index 000000000..7ab31fc89 --- /dev/null +++ b/examples/redux/components/AddTodo.js @@ -0,0 +1,73 @@ +import React from 'react'; +import { Button, StyleSheet, Text, View, TextInput } from 'react-native'; +import { bindActionCreators } from 'redux'; +import { connect } from 'react-redux'; +import { addTodo } from '../actions/todoActions'; + +export function AddTodo(props) { + const [text, setText] = React.useState(''); + + const submitForm = () => { + const todo = { + id: props.todoLength + 1, + text, + date: new Date(), + }; + + props.addTodo(todo); + setText(''); + }; + + return ( + + Enter a text below to add a new todo + setText(t)} + placeholder="Enter the name of the repository here" + /> + +