#flux pattern

We created a dice simulation program using flux design pattern here https://zamjad.wordpress.com/2023/09/10/flux-design-pattern-using-typescript-in-react/ Now let’s try to create a same program, but this time using one of the very popular state management library Redux. Let’s first install the redux using the following npm command on the terminal npm install redux react-redux The main concept is…

Flux is an interesting unidirectional architectural design pattern introduced by Facebook for React. React has unidirectional binding, unlike Angular which has bidirectional binding. It is the same pattern used by in Redux, which is very popular JavaScript library for statement management. It is important to know that Redux is not the only state management library, other possible choices are…

Topics

React Router

Flux pattern

jBuilder

React Components

Component Hierarchy

Today was our last day of pair programming =(

Wrapping it all together

Projects

Pokedex

An app to organize your Pokemon and their Toys

ApiUtil

PokemonActions

PokemonConstants

PokemonStore

React Components

PokemonsIndex

PokemonIndexItem

React Router

PokemonDetail

PokemonIndexItem

ToysIndex

ToyIndexItem

ToyDetail

PokemonForm

Partner: Hiroyuki Kajino

Learnings

Including the following code in your webpack.config.js to show the full branching of files in Chrome Dev Tools, rather than just the bundle.js file

devtool: "source-map"

componentWillReceiveProps(newProps) - this will run before the element has received new props, but can take the new props as an argument

this.props.params - still holds original params

newProps - can pull from the arguments

Can access both old & new props

hashHistory.push('/newpath') - convenient way to navigate a one-page app using Hash History

Writing console.log()'s in each portion of the Flux pattern is helpful when trying to debug and find the root of the issue

Topics

Flux - architectural pattern, not a framework

Flux library - written by Facebook

React on Rails

React

Javascript

JSX

Rails

Ruby

Postgresql

HTML

Projects

Playable Keyboard Organ

Plays notes based on key-presses & key-releases

Record songs as a series of keypresses & timeSlices

Playback recorded songs

Save recorded songs

Play & Delete saved songs

Partner: Oscar Sandoval

Learnings

Array#splice(idx, chars_to_remove) -- useful for removing one element, or a set number of consecutive elements from an array. Mutates the original array, returns the removed element(s)

rake db:create - make sure to run this to set up psql backend, even if you have not database tables. Otherwise, the root folder can't be loaded

Axios - very similar to jQuery but much lighter, focused on making AJAX requests

Good alternative to using jQuery in Rails