Skip to content

Instantly share code, notes, and snippets.

@kiok46
kiok46 / ReduxTypes.js
Created June 10, 2018 11:47
Redux, Reactotron, Actions, Reducers and Sagas (2)
export const TEXT_CHANGED = 'text_changed';
export const TEXT_CHANGED_SUCCESS = 'text_changed_success';
@kiok46
kiok46 / ReduxLogger.js
Created June 10, 2018 10:53
Redux, Store, Actions, Reducers and logger: Get Started and a little further (1)
import { createStore, compose, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import { createLogger } from 'redux-logger';
import reducers from '../Reducers';
const middleWare = [];
middleWare.push(thunk)
const loggerMiddleware = createLogger({
@kiok46
kiok46 / ReduxTextReducerUpdated.js
Created June 10, 2018 10:51
Redux, Store, Actions, Reducers and logger: Get Started and a little further (1)
import {
TEXT_CHANGED
} from '../Actions/types';
/* Remember that TEXT_CHANGED should be defined and must have a value otherwise it
will be undefined and no error would popup and in the reducer we will have a
case of undefined
case undefined:
return ...
@kiok46
kiok46 / ReduxReducerIndex.js
Created June 10, 2018 10:50
Redux, Store, Actions, Reducers and logger: Get Started and a little further (1)
import { combineReducers } from 'redux';
import TextReducer from './TextReducer';
export default combineReducers({
// the keys here are going to be the property of state that we are producing.
text_reducer: TextReducer
});
@kiok46
kiok46 / ReduxTextReducer.js
Created June 10, 2018 10:49
Redux, Store, Actions, Reducers and logger: Get Started and a little further (1)
const INITIAL_STATE = {
text: ''
};
export default ( state=INITIAL_STATE , action ) => {
/* We always have the exact same format for every reducer we write, we always
have a switch statement and depending on the action it will decide what to
do with it.
@kiok46
kiok46 / ReduxCustomTextInputActions.js
Created June 10, 2018 10:48
Redux, Store, Actions, Reducers and logger: Get Started and a little further (1)
import {
TEXT_CHANGED
} from './types';
export const textChanged = (text) => {
return {
type: TEXT_CHANGED,
payload: text
};
}
@kiok46
kiok46 / ReduxCustomTextInput.js
Created June 10, 2018 10:47
Redux, Store, Actions, Reducers and logger: Get Started and a little further (1)
export default class CustomTextInput extends Component {
onTextChange = (text) => {
// Step-12
}
render() {
return (
<View
style={{ flex: 1, justifyContent: 'center', alignItems: 'center'}}
>
<TextInput
@kiok46
kiok46 / ReduxSourceAppInit.js
Created June 10, 2018 10:28
Redux, Store, Actions, Reducers and logger: Get Started and a little further (1)
// In src/App.js
import { Provider } from 'react-redux';
import store from './Store';
import CustomTextInput from './Components/CustomTextInput';
<Provider store={store}>
<CustomTextInput/>
</Provider>
@kiok46
kiok46 / ReduxDummyReducerInit.js
Created June 10, 2018 10:25
Redux, Store, Actions, Reducers and logger: Get Started and a little further (1)
import { combineReducers } from 'redux';
export default combineReducers({
temp: () => {return {}}
})
@kiok46
kiok46 / ReduxStoreInit.js
Created June 10, 2018 10:24
Redux, Store, Actions, Reducers and logger: Get Started and a little further (1)
// store/index.js
import { createStore, compose, applyMiddleware } from ‘redux’;
import thunk from ‘redux-thunk’;
const store = createStore({
reducers,
{}, // default state of the application
compose(
applyMiddleware(thunk)
)