Как подключить действия Redux к React Context API? - PullRequest
Новая
       19

Как подключить действия Redux к React Context API?

0 голосов
/ 31 мая 2019

Я настраиваю аутентификацию в приложении реакции / редукции.Перед защитой моих маршрутов я настраиваю аутентификацию входа в систему / регистрации / выхода с токенами JWT в локальном хранилище, используя Redux.Теперь, когда я пытаюсь защитить маршруты для пользователей, которые вошли в систему, я познакомился с новым React Context API через эту прекрасную статью: https://www.freecodecamp.org/news/how-to-protect-your-routes-with-react-context-717670c4713a/.

Это пример из статьи супрощенные методы входа / выхода из системы. 


const AuthContext = React.createContext()

class AuthProvider extends React.Component {
  state = { isAuth: false }

  constructor() {
    super()
    this.login = this.login.bind(this)
    this.logout = this.logout.bind(this)
  }

  login() {
    setTimeout(() => this.setState({ isAuth: true }), 1000)
  }

  logout() {
    this.setState({ isAuth: false })
  }

  render() {
    return (
      <AuthContext.Provider
        value={{
          isAuth: this.state.isAuth,
          login: this.login,
          logout: this.logout
        }}
      >
        {this.props.children}
      </AuthContext.Provider>
    )
  }
}

const AuthConsumer = AuthContext.Consumer

export { AuthProvider, AuthConsumer }

Вот пример действия от redux: 

export const login_user = (data) => dispatch => {
    dispatch({
        type: LOGIN_INIT
    })
    fetch('http://localhost:8000/token-auth/', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(data)
    })
      .then(res => res.json())
      .then(json => {
        localStorage.setItem('token', json.token)
        dispatch(login_user_success(json.user))
      })
      .catch(error => {
        dispatch(login_user_failure(error))
      })
   }

Вот пример из моего authReducer, который касается входа в систему: 

...
      case LOGIN_SUCCESS: {
        return {...state, data: action.payload, logged_in: true}
      }
...

Исходный файл LoginContainer.js, который был подключен к хранилищу Redux: 

...
const mapStateToProps = ({ user }) => ({
    user_data: user.data,
    logged_in: user.logged_in
  });

  const mapDispatchToProps = dispatch => ({
    actions: bindActionCreators(AuthActions, dispatch)
  });

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

Я попытался подключиться так: AuthContext.js 

...
const mapStateToProps = ({ user }) => ({
    user_data: user.data,
    logged_in: user.logged_in
  });

const mapDispatchToProps = dispatch => ({
    actions: bindActionCreators(AuthActions, dispatch)
  });

export default connect(
    mapStateToProps,
    mapDispatchToProps
    )({ AuthProvider, AuthConsumer })

, но в результате возникает ошибка импорта вМой навигационный компонент.

...