4 years ago
Zaid Bin Khalid
4,376 Views
3
In this session, we will learn and discuss the flux concept and usage of flux in React JS with the help of examples and code.
Flux Concept
The programming concept is a Flux Concept. Where your data is uni-directional. Flux Elements the following explanation of flux concept is the simplest explanation. In the next session, we will learn how to use this into the app.
Flux Elements
The following explanation is a simple explanation of the flux concept. In the next session, we will learn how to use this in the app.
Actions: The data flow Actions are sent to the trigger dispatcher.
Dispatcher: The dispatcher is a central hub of the app, where all the dispatched and sent data stores.
Store: Store is the place where the application state and logic are store.
View: The view will receive from the Data store and re-render to the app.
The Following image will show how it’s works.
Flux Pros
In single directional data flow is easy to understand. The app parts are decoupled easily. It will help to maintain app easily.
Step 1 – Install Redux
Install Redux In the first step, Install redux with the help of a command prompt window.
C:\Users\username\Desktop\reactApp>npm install --save react-redux
Step 2 – Create Files and Folders
Create Files and Folders, In the second step, we will learn and discuss how to create folders and files for our actions, reducers, and components. After we completed the step. The following folder structure will look like
C:\Users\Learncodeweb\Desktop\reactApp>mkdir actions
C:\Users\Learncodeweb\Desktop\reactApp>mkdir components
C:\Users\Learncodeweb\Desktop\reactApp>mkdir reducers
C:\Users\Learncodeweb\Desktop\reactApp>type nul > actions/actions.js
C:\Users\Learncodeweb\Desktop\reactApp>type nul > reducers/reducers.js
C:\Users\Learncodeweb\Desktop\reactApp>type nul > components/AddTodo.js
C:\Users\Learncodeweb\Desktop\reactApp>type nul > components/Todo.js
C:\Users\Learncodeweb\Desktop\reactApp>type nul > components/TodoList.js
Step 3 – Actions
Actions In the third step, JavaScript objects are Actions that use type property command to inform about the data that should be sent to the store. We are adding a new item to our list With the help of ADD_TODO action.
//actions/actions.js
export const ADD_TODO = 'ADD_TODO'
let nextTodoId = 0;
export function addTodo(text) {
return {
type: ADD_TODO,
id: nextTodoId++,
text
};
}
Step 4 – Reducers
To search for an ADD_TODO action. We are using a switch statement.
//reducers/reducers.js
import { combineReducers } from 'redux'
import { ADD_TODO } from '../actions/actions'
function todo(state, action) {
switch (action.type) {
case ADD_TODO:
return {
id: action.id,
text: action.text,
}
default:
return state
}
}
function todos(state = [], action) {
switch (action.type) {
case ADD_TODO:
return [
...state,
todo(undefined, action)
]
default:
return state
}
}
const todoApp = combineReducers({
todos
})
export default todoApp
Step 5 – Store
A store is a place that holds the app’s state.
//main.js
import React from 'react'
import { render } from 'react-dom'
import { createStore } from 'redux'
import { Provider } from 'react-redux'
import App from './App.jsx'
import todoApp from './reducers/reducers'
let store = createStore(todoApp)
let rootElement = document.getElementById('app')
render(
<Provider store = {store}>
<App />
</Provider>,
rootElement
)
Step 6 – Root Component
The App component is the root component of the app.
//App.jsx
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { addTodo } from './actions/actions'
import AddTodo from './components/AddTodo.js'
import TodoList from './components/TodoList.js'
class App extends Component {
render() {
const { dispatch, visibleTodos } = this.props
return (
<div>
<AddTodo onAddClick = {text =>dispatch(addTodo(text))} />
<TodoList todos = {visibleTodos}/>
</div>
)
}
}
function select(state) {
return {
visibleTodos: state.todos
}
}
export default connect(select)(App);
App.jsx
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { addTodo } from './actions/actions'
import AddTodo from './components/AddTodo.js'
import TodoList from './components/TodoList.js'
class App extends Component {
render() {
const { dispatch, visibleTodos } = this.props
return (
<div>
<AddTodo onAddClick = {text =>dispatch(addTodo(text))} />
<TodoList todos = {visibleTodos}/>
</div>
)
}
}
function select(state) {
return {
visibleTodos: state.todos
}
}
Step 7 – Other Components
These types of components should not be aware of redux. EXAMPLE When we started the app, we will be able to add items to our list.
//components/AddTodo.js
import React, { Component, PropTypes } from 'react'
export default class AddTodo extends Component {
render() {
return (
<div>
<input type = 'text' ref = 'input' />
<button onClick = {(e) => this.handleClick(e)}>
Add
</button>
</div>
)
}
handleClick(e) {
const node = this.refs.input
const text = node.value.trim()
this.props.onAddClick(text)
node.value = ''
}
}
components/Todo.js
import React, { Component, PropTypes } from 'react'
export default class Todo extends Component {
render() {
return (
<li>
{this.props.text}
</li>
)
}
}
//components/TodoList.js
import React, { Component, PropTypes } from 'react'
import Todo from './Todo.js'
export default class TodoList extends Component {
render() {
return (
<ul>
{this.props.todos.map(todo =>
<Todo
key = {todo.id}
{...todo}
/>
)}
</ul>
)
}
}
We will be able to add items to our list when we started the app.
4 years ago
Zaid Bin Khalid
4,376 Views
3