Coder Social home page Coder Social logo

rodrigoelp / reactnative-typescript-exercise-6 Goto Github PK

View Code? Open in Web Editor NEW
2.0 2.0 1.0 408 KB

Simple exercise to test redux in a react native app

Python 6.88% Java 5.62% JavaScript 0.13% Objective-C 17.55% TypeScript 69.83%
typescript redux react-native learning learn-by-doing ios android

reactnative-typescript-exercise-6's Introduction

React Native app + Typescript + Redux. What can go wrong?

Getting started with react-native gives you some work to catch up with its concepts and framework (especially to those that have been working in iOS, Windows and Android natively for a long time... like me) and to complicate things a bit more, everybody tells you to check out redux (including facebook).

So, this is my head dive into redux.

Where to start?

Installing the modules for your application to use. Interestingly enough, redux-thunk had already its type definition.

Checking packages.json

I can see I have installed all the modules we have seen before: react, react-native and its type definitions. But, I have also included redux (main library), react-redux (so react can work with redux, I guess), and redux-thunk which I am not quite clear what it does (other than helping noobs like me).

What do I need to get the app to work?

After checking the redux docos and some tuts, I understand that I need to:

  1. Create some reducers that will encapsulate how the data exists and changes over time. This means the data itself does not change, it creates copies including the changes, creating some sort of time series that I can visit later on.
  2. Create a store that takes in the reducers.
  3. Create an app, hosting a Provider component that takes the store we created before.
  4. Host in the Provider the App 'dumb' component that will point to a 'container' which is a component that knows how to map its state in the store to its properties.
  5. Create a container (pretty similar to a component).
  6. On the same container file, create the function mapStateToProps which is a function (store_state) => props. This function will map the entire state of the store and create the properties your container will consume. For example, if your store was defined with a reducer as follows { userInfo: userInfoReducer, availableSongs: songsReducer, cart: cartReducer } and all you want to display is the list of available songs, then your map will be function mapStateToProps(state) { return { songs: state.availableSongs }; } (although I need to know how to do this in typescript).
  7. On the same file, tell redux you want to connect the store with your container by calling export default connect(mapStateToProps)(ContainerName).
  8. Change the container to expose the appropriate visual component that will display the information. All the information exposed from the complete store to the props done on step 4
  9. Create your actions: set of functions (action creators) that will indicate the type of the action (the trigger) and the payload or the information that triggered the action. That action is what is fed into the reducer (coming to full cycle), at this point we might want to change our reducers to return a different state when a type is provided to it)...
  10. Now you will need to connect the action to the container by calling bindActionCreators with the dispatch as: function matchDispatchToProps(dispatch) { return bindActionCreators({ actionName: action }, dispatch); }
  11. Change connect to take in the matchDispatchToProps as follows: connect(mapStateToProps, matchDispatchToProps)(ContainerName). This will expose the action to your component by adding it to its properties.
  12. Changing the reducers to create new states based on actions. What it means is, either I create a new reducer (for instance, if I am selecting a song to add to my shopping cart, then my cartReducer will receive the action of type songSelected and append it to the list of songs in the cart and return the new object).

How to run this code?

# Cloning the repo to 'simpleredux'
git clone [email protected]:rodrigoelp/reactnative-typescript-exercise-6.git simpleredux
# Changing directory
cd simpleredux/
# Installing dependencies
yarn # if you have not installed yarn, then change it to: npm install
# Compiling the typescript code
./node_modules/.bin/tsc
# Launching the react-native development server
open -a Terminal "`react-native start`"
# Compiling the code for ios and deploying it to the simulator
react-native run-ios # optionally, type: react-native run-android

reactnative-typescript-exercise-6's People

Stargazers

 avatar  avatar

Watchers

 avatar  avatar

Forkers

craftomecj

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.