Redux, Store, Действия, Редукторы и регистратор: Начните и немного дальше (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)
    )
})
export default store;

import { combineReducers } from 'redux';
export default combineReducers({
    temp: () => {return {}}
})

import reducers from '../Reducers';

// In src/App.js
import { Provider } from 'react-redux'; 
import store from './Store';
import CustomTextInput from './Components/CustomTextInput';



   

User types something -> call action creator with new text ->
action creator returns an action -> action sent to all reducers ->
reducers calculates new app state -> state sent to all components ->
component rerender with new state -> wait for new change -> repeat.

- index.ios.js
- index.android.js
- Tests/
- src/
  - App.js # Entry point
  - Components/
      - CustomTextInput.js  
  - Actions/
      - CustomTextInputActions.js
      - index.js
      - types.js
  - Reducers/
      - index.js
  - Store/
      - index.js
  - Navigation
  - Constants/
  - Screens/
  - Assets/
  - Services/

- index.ios.js
- index.android.js
- Tests/
- App/
  - Components/
  - Config/
  - Containers/
  - I18n/
  - Reducers/
      - index.js
  - Store/
      - index.js
  - Navigation
  - Themes/
  - Assets/
  - Services/

export default class CustomTextInput extends Component {
  onTextChange = (text) => {
  // Step-12
  }
  render() {
    return (
      
         this.onTextChange(text)}
          placeholder="Search"
          style={{ height: 80, width: 200, fontSize: 30 }}
        />
      
    );
  }
}

export const TEXT_CHANGED = 'text_changed';

import {
  TEXT_CHANGED
} from './types';

export const textChanged = (text) => {
  return {
    type: TEXT_CHANGED,
    payload: text
  };
}

export * from './CustomTextInputActions';

import { connect } from 'react-redux';
import textChanged from '../Actions';

class CustomTextInput extends Component {
 ... bla bla bla
}

export default connect(null, textChanged)(CustomTextInput);

user types something -> calls event handler -> calls action creator with new text
-> action creator returns an action -> sends that actions to all the reducers

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.
  
  we can never return undefined from a reducer, every time our reducers are call
  we should have a default state.
  */
  switch (action.type) {
    case:
       // in step 11
      
    default:
      // Return the initial state when no action types match.
      return state
  }
}

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
  
});

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 ...

which is not what we want.
*/

const INITIAL_STATE = {
  text: ''
};

export default ( state=INITIAL_STATE , action ) => {
  switch (action.type) {
    case TEXT_CHANGED:
       /*
          slice of state (that the reducer last published)  +  action
                         |
                    into the reducer
                         | 
              returns a new slice of state
       
       After our reducer runs, redux looks at the old value of the state and the
       new one. `is newState === oldState?` (matches the object) we must return a
       new object. (have to take care of immutable objects)
       
       Make a new object, take all the properties from the existing state object
       and throw that into our new object then define the property `text`, give it
       a value of action.payload and put it one top of whatever properties we had
       on the old state object.
       
       Now, since old state object already has a text property so, it will be
       overwritten with a new value.
       */
       
       return {...state, text: action.payload}
      
    default:
      /*
      We will just return the state. Return the initial state when nothing changes
      hence no re-rendering.
      */
      return state
  }
};

onTextChange = (text) => {
    this.props.textChanged(text)
}

const mapStateToProps = state => {
  return {
    text: state.text_reducer.text
  }

}

// Pass it as the first argument to our connect function.

export default connect(mapStateToProps, textChanged)(CustomTextInput);

value={this.props.text}

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({
  predicate: () => process.env.NODE_ENV === 'development',
});
middleWare.push(loggerMiddleware)

const store = createStore(
  reducers,
  {},
  compose(
    applyMiddleware(...middleWare)
  )
);

export default store;