Redux Practice Process

Note: This is not an article to explain what is Redux.

Step 1: Install “redux”

1
npm i redux


Step 2: Create store directory under src/



Step 3: Create store.js & reducer.js under src/store/



Step 4: Consider store as a data warehouse, and reducer is the warehouse manager, and store‘s constructor needs a reducer as param, so firstly we need to create contents in the reducer. It includes an object to hold init states and a function which takes old state and action as params and return new state (old states are immutable):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const defaultState = {
    myBoolState: false,
    myListState: [],
};

export default (state=defaultState, action)=>{
    if(action.type === "for_example_search_focus"){
        return {
            myBoolState: true,
            myListState: state.myListState
        }
    }
    if(action.type === "for_example_search_blur"){
        return {
            myBoolState: false,
            myListState: state.myListState
        }
    }
    return state
}


Step 5: Using the reducer(data manager) to create the store(data warehouse), in file store.js, we need to import { createStore } from ‘redux’, then:

1
2
3
4
5
6
import { createStore } from 'redux';
import reducer from './reducer';

const store = createStore(reducer);

export default store;


Step 6: install React-redux

1
npm i react-redux


Step 7: Usually in App(root) component, import {Provider} from ‘react-redux’, wrap everything that needs the store into Provider component:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import React from 'react';
import myComponent from './components/myComponent';
import store from './store';
import { Provider } from 'react-redux';

function App() {
  return (
    <Provider store={store}>
        <myComponent />
    </Provider>
  );
}

export default App;


Step 8: Each time when we need data communication between a component and the store, we import {connect} from ‘react-redux’ and wrap our component by using connect function, it likes the decorator in Python ( or closure & currying in many other languages, don’t worry about it) because it takes two params first and then takes our own component as last param. ‘mapStateToProps’ decide what state the component want to receive from global store, ‘mapDispatchToProps’ decide what states in the global store the component could affect, so we can see it as a double-way binding, and it’s also the reason why the name is “connect”:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
import React from 'react';
import { connect } from 'react-redux';

class myComponent extends React.Component{
    render(){
        return(
            <div>
                <input
                    className={this.props.isFocus? 'isFocus': ''}
                    onFocus={()=>{this.props.onFocusHandler()}}
                    onBlur={()=>{this.props.onBlurHandler()}}
                ></input>
                {this.searchInfoShow(this.props.isFocus)}        
            </div>
        )
    }

    searchInfoShow = (isShow) => {
        if (isShow){
            return (
                  <ul>
                      {this.props.list.map((item)=>{
                          return(
                              <li key={item}>{item}</li>
                          )
                      })}                    
                  </ul>
            )
        }
    }
}

const mapStateToProps=(state)=>{
    return {
        isFocus: state.myBoolState,
        list: state.myListState,
    }
}

const mapDispatchToProps=(dispatch)=>{
    return {
        // action type should be compatible with action.type in step 4
        onFocusHandler(){
            const action = {
                // type is mandatory
                type: 'search_focus'
                data: 'some random data'
            }
            dispatch(action);
        },
        onBlurHandler(){
            const action = {
                type: 'search_blur'
            }
            dispatch(action);
        }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(myComponent);

Leave a Reply

Your email address will not be published. Required fields are marked *