Bindactioncreators in react Redux

Time:2021-1-17

Recently, I’m learning react. I’ve learned from GitHub a project with many stars. Encountered the following code

export const loginSuccessCreator = (userName) => {
  return {type: 'LOGIN_SUCCESS', payload: userName};
};

const initState = {
  Login: false, // logged in
  User name: 'not logged in', // user name after logging in
};

const reducer = (state = initState, action = {}) => {
  switch (action.type) {
    case 'LOGIN_SUCCESS':
      return {...state, login: true, userName: action.payload};
    default:
      return state;
  }
};

export default {initState, reducer};
const mapDispatchToProps = (dispatch) => {
  return {
    handleLoginSuccess: bindActionCreators(loginSuccessCreator, dispatch),
  };
};

//You don't need to get anything from the state, so pass a null
export default connect(null, mapDispatchToProps)(Login);

At that time, I didn’t go to the official documents to learn about bindactioncreators. Casually Baidu next, found that no one said clearly what this is, what is the use of the scene (I may not find that clear).

According to what I just learned, I will write as follows:

const mapDispatchToProps = (dispatch) => {
  return {
    handleLoginSuccess: (name) => {
      dispatch(loginSuccessCreator(name))
    }
  }
};

What’s the difference between the two writing methods? Look at the official documents. Direct paste code:

TodoActionCreators.js

export function addTodo(text) {
  return {
    type: 'ADD_TODO',
    text
  }
}
​
export function removeTodo(id) {
  return {
    type: 'REMOVE_TODO',
    id
  }
}

SomeComponent.js

import { Component } from 'react'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
​
import * as TodoActionCreators from './TodoActionCreators'
console.log(TodoActionCreators)
// {
//   addTodo: Function,
//   removeTodo: Function
// }
​
class TodoListContainer extends Component {
  constructor(props) { 
    super(props);
​
    const {dispatch} = props;
​
    // Here's a good use case for bindActionCreators:
    // You want a child component to be completely unaware of Redux.
    // We create bound versions of these functions now so we can
    // pass them down to our child later.
​
    this.boundActionCreators = bindActionCreators(TodoActionCreators, dispatch)
    console.log(this.boundActionCreators)
    // {
    //   addTodo: Function,
    //   removeTodo: Function
    // }
  }
​
  componentDidMount() {
    // Injected by react-redux:
    let { dispatch } = this.props
​
    // Note: this won't work:
    // TodoActionCreators.addTodo('Use Redux')
​
    // You're just calling a function that creates an action.
    // You must dispatch the action, too!
​
    // This will work:
    let action = TodoActionCreators.addTodo('Use Redux')
    dispatch(action)
  }
​
  render() {
    // Injected by react-redux:
    let { todos } = this.props
​
    return <TodoList todos={todos} {...this.boundActionCreators} />
​
    // An alternative to bindActionCreators is to pass
    // just the dispatch function down, but then your child component
    // needs to import action creators and know about them.
​
    // return <TodoList todos={todos} dispatch={dispatch} />
  }
}
​
export default connect(
  state => ({ todos: state.todos })
)(TodoListContainer)

If todoactioncreators do not use bindactioncreators, we need to write as follows:

const mapDispatchToProps = (dispatch) => {
  return {
    addTodo: (text) => {
      dispatch(TodoActionCreators.addTodo(text))
    },
    removeTodo: (id) => {
      dispatch(TodoActionCreators.removeTodo(id))
    }
  }
};

Using bindactioncreators

const mapDispatchToProps = (dispatch) => {
  return bindActionCreators(TodoActionCreators, dispatch);
};

Back to the beginning of the code

const mapDispatchToProps = (dispatch) => {
  return {
    handleLoginSuccess: bindActionCreators(loginSuccessCreator, dispatch),
  };
};

Here, loginsuccesscreator is a function. In the example of official website document, an object is passed in, but the source function can also handle it (return the function).

Now that you have only one Creator (loginsuccesscreator returns only one action), what’s the point of using bindactioncreators?

Rather baffling, I make complaints about the use of bindActionCreators.

Recommended Today

DK7 switch’s support for string

Before JDK7, switch can only support byte, short, char, int or their corresponding encapsulation classes and enum types. After JDK7, switch supports string type. In the switch statement, the value of the expression cannot be null, otherwise NullPointerException will be thrown at runtime. Null cannot be used in the case clause, otherwise compilation errors will […]