[React Native] Redux

actions.js 예시

/*
 * action types
 */

export const ADD_TODO = 'ADD_TODO';
export const TOGGLE_TODO = 'TOGGLE_TODO';
export const SET_VISIBILITY_FILTER = 'SET_VISIBILITY_FILTER';

/*
 * other constants
 */

export const VisibilityFilters = {
    SHOW_ALL:'SHOW_ALL',
    SHOW_COMPLETED:'SHOW_COMPLETED',
    SHOW_ACTIVE:'SHOW_ACTIVE'
};


/*
 * action creators
 */

export function addTodo(text){
    return {
        type: ADD_TODO,
        id: 123,
        text
    }
}

export function toggleTodo(index) {
    return{
        type:TOGGLE_TODO,
        index
    }
}

export function setVisibilityFilter(filter){
    return{
        type:SET_VISIBILITY_FILTER,
        filter
    }
}

 

---

reducers.js 예시

import {combineReducers} from 'redux'
import {ADD_TODO, SET_VISIBILITY_FILTER, TOGGLE_TODO, VisibilityFilters} from "./actions";


const initialState = {
    visibilityFilter: VisibilityFilters.SHOW_ALL,
    todos:[]
};


function todos(state = [],action){
    switch (action.type){
        case ADD_TODO:
            return[
                ...state,
                {
                    text:action.text,
                    id:action.id,
                    completed:false
                }
            ];
        case TOGGLE_TODO:
            return state.map((todo,index)=>{
                if(index === action.index){
                    return Object.assign({},todo,{
                        completed:!todo.completed
                    })
                }
                return todo;
            });
        default:
            return state;
    }
}

function visibilityFilter(state = VisibilityFilters.SHOW_ALL, action){
    switch (action.type){
        case SET_VISIBILITY_FILTER:
            return action.filter;
        default:
            return state;
    }
}

const todoApp = combineReducers({
    visibilityFilter:visibilityFilter,
    todos:todos
});

export default todoApp;

 

 

---

store.js 예시

import {createStore} from 'redux'
import todoApp from './reducers'
import {addTodo, setVisibilityFilter, toggleTodo, VisibilityFilters} from "./actions";


const store = createStore(todoApp);

store.subscribe(()=>console.log("LOG",store.getState()));

store.dispatch(addTodo('learn about actions'));
store.dispatch(addTodo('SECOND~'));
store.dispatch(addTodo('WOW LAST~'));
store.dispatch(toggleTodo(0));
store.dispatch(toggleTodo(1));
store.dispatch(setVisibilityFilter(VisibilityFilters.SHOW_COMPLETED));

export default store;

 

---

App 내에서 store를 불러와서 사용하는 예시

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
    StyleSheet,
    View,
    Text,
    Image,
    Dimensions,
    ScrollView,
    FlatList,
    TouchableOpacity,
    Platform,
} from 'react-native';
import {createStore} from 'redux'
import {addTodo, setVisibilityFilter, toggleTodo, VisibilityFilters} from "../reducers/actions";
import store from '../reducers/index'


const myScreen = Dimensions.get('window');

export default class App extends Component {

    constructor(){
        super();

        console.log("AAA");

        store.dispatch(addTodo('learn about actions'));
        store.dispatch(addTodo('SECOND~'));
        store.dispatch(addTodo('WOW LAST~'));
        store.dispatch(toggleTodo(0));
        store.dispatch(toggleTodo(1));
        store.dispatch(setVisibilityFilter(VisibilityFilters.SHOW_COMPLETED));
        console.log("MMBBBM");
        console.log(store.getState().todos.length);

        console.log("CCC");



    }

    addTodoForTest(){
        store.dispatch(addTodo("asdacx"));
    }

    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.textStyle_title}>
                    {store.getState().todos.length}
                </Text>
                <TouchableOpacity
                    onPress={()=>this.addTodoForTest()}
                >
                    <Text style={styles.textStyle_title}>
                        +++++
                    </Text>
                </TouchableOpacity>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex:1,
        flexDirection: 'column',
        justifyContent:'center',
        alignItems:'center',
        backgroundColor:'#65C6AE',
        marginTop: Platform.OS === 'ios' ? 20 : 0,
    },
    headerContainer:{
        width:myScreen.width,
        height:60,
        backgroundColor:'#48707F',
        flex:1,
        justifyContent:'center'
    },
    textStyle_header:{
        fontSize:18,
        fontWeight:'bold',
        marginLeft:20,
        marginRight:10,
        color:'white',
    },
    textStyle_title:{
        fontSize:16,
        fontWeight:'bold',
        marginLeft:20,
        marginRight:10,
        color:'#D7F2EF'
    },
    textStyle:{
        fontSize:15,
        marginLeft:20,
        marginRight:10,
        color:'#BBE3CD'
    }
});