Redux.js - мне не удается сопоставить StateToProps с React Redux - блок My React Component в начальном состоянии магазина и не удается обновить при обновлении store.state

Question

В настоящее время я пытаюсь передать файл app.state, содержащийся в хранилище Redux, в компонент React.

Пока что эта проблема все еще остается загадкой ...

------> ЗДЕСЬ ХРАНИЛИЩЕ МОЕГО КОДА GITHUB <------ </p>

Надеюсь, это поможет понять, что не так.

Аннотация:

Моя проблема, в основном, связана с mapStateToProps, касается связи компонента с хранилищем состояний , AFAIK, остальное работает очень хорошо, но Что-то вроде ярлыка my.props в компоненте React потому что я использую connect () или удаляю метод mapStateToProps, мой Компонент все еще отображает начальное состояние ..!

Redux сопротивляется мне как босс конечного уровня ...

---

СОСТОЯНИЕ ИГРА

• Поставщик с магазином react-redux: ОК
• Подключить функцию прохода к подпоркам: ОК
• mapDispatchToProps работает отлично! Так почему же государство не может обновить реквизиты, так как соединение кажется хорошо установленным?
  • Я знаю, что мое действие хорошо сопоставлено, так как, когда я удаляю mapDispatch в композиции соединения, компонент не может вызвать соответствующее действие.
• Когда console.log, mapState эффективно получает обновление магазина, но Компонент остается заблокированным в исходном состоянии (проверено с помощью кнопки «checkState» на компоненте, которая возвращает «store.getState (). PropertyTargeted»

СОВЕТЫ: ​​

• когда я удаляю mapStateToProps в connect, мой React.Component продолжает получать initialState, так что, возможно, есть другой источник, который перезаписывает мои mapStateToProps, я ищу его в настоящее время
• Моя переменная this.props.state вызывается в конструкторе компонента, может, конструктор не получает store.updateState или что-то в этом роде? Еще один трек для подражания.

Вот мой комбинат Reducer.js:

import { combineReducers } from "redux";

import {post} from "./status"
import {entry}from "./updateState";

// only one reducer active 
const appReducer = combineReducers({ 
    entry,
    post

})
export default appReducer

Вот мой container.js:

const mapStateToProps = (state) => {

  return { word: state.entry.word }
}

const mapDispatchToProps = {
     postFile: postFileAction  
}

const PostFileContainer = connect(mapStateToProps, mapDispatchToProps)(Component) ;

Мой постFile.js:

export const postFile = (word, base64Data) => dispatch => {
  console.log("postFile httpRequest reached")

  dispatch({
    type: 'POST_WORD',
    status: request
  });
  Axios.post("http://localhost:7500/api/files", {
      "word": word,
      "data": base64Data

    }, {
      "Content-Type": "multipart/form-data"
    })
    .then(res =>
      dispatch({
        type: 'POST_WORD',
        status: success,
        res
      }))
    .catch(err => {
      dispatch({
        type: 'POST_WORD',
        status: error,
        err
      })
    });


}

Здесь, в моем store.initialState:

initial state: {
  "post": {},
  "entry": {
    "word": "initialWord"
  }
}

UPDATE_STATE_POSTWORD предоставляется другим компонентом React, поэтому отправляется в хранилище до того, как компонент с ошибками запустит свое собственное действие с обновленной записью слова. Вот мой фрагмент действия UPDATE_STATE_POSTWORD:

export const updateWord = word => {
  return {
    type: UPDATE_STATE_POSTWORD,
    word
  };
} 

/// redurs.js part ///

postReducer.js:

  export const post = (state ={}, action) => {

  console.log("postStatus reached - reducer")
    switch (action.status) {
      case request:
        console.log("Request start")
        return state
      case success:
        switch (action.type) {
          case POST_FILE:
            console.log("request succeed: ", action.res)

            var _id = action.res._id
            // var word= action.res.word
            return (Object.assign({}, state, {
              _id 
            }))
          case POST_WORD:
            console.log("request succeed: ", action.res)
            return (Object.assign({}, state, {
              _id: ""
            }))
          default : 
            console.log(`default state on success case in
                         postStatusReducer`)
            return state
      }
      case error:
        console.log("request error: ", action.err)
        return state
      default:
        return state
    }

}

entryReducer.js:

 const initialState = { word : "initialWord" }
 export const updateStateReducer = (state= initialState, action) => 

{

    switch (action.type) {
        case UPDATE_STATE_POSTWORD:
            var word = action.word
            return (Object.assign({}, state, {
                word
            }))
        default:
            return state

    }
}

Спасибо

Answer 1

Если вы используете react-thunk, ваше действие fn получит функции dispatch и getState в качестве аргументов. Запуск getState даст вам реальное состояние приложения. Полученные данные будут переданы в редуктор и т. Д.

В вашем примере RecordingAPI получает реквизиты, которые поступают только из-за избыточности при инициализации - в конструкторе. Вы можете исправить свой компонент, добавив componentWillReceiveProps method

class RecordingAPI extends React.Component {
    constructor(props) {
        super(props);
        ...
        this.state = {
            word : this.props.word,
            state: this.props
        };
    }
    // new method that listens to props
    componentWillReceiveProps (props) {
        this.setState({
            word:   this.props.word,
            state:  this.props
        });
    }

    checkState(e){
        e.persist();
        e.preventDefault();
        e.stopPropagation();
        console.dir(this.state.word)
        console.dir(this.state.state)
    }

    render() {
        ...

        return (
            <div>
                <button onClick={(e) => this.checkState(e)}>  CheckState </button> 
            </div>
        );
    }
}

Answer 2

Мой текущий обходной путь - импортировать хранилище прямо в мой React Component, а затем подписаться на изменения следующим образом:

import {store} from "../App" 

    store.subscribe(() => {
      // When state will be updated
      // we will update local component state and force component to rerender 
      // with new data.

      this.setState({
        word: store.getState().entry.word // new entry.words at each update in the statge of the React.Component
      });
    });

ОТВЕТ:

Присваивая значение store.state конструктору состояния Компонента, Компонент не смог обновить состояние. Таким образом, ссылка на store.state с помощью this.props вне любого присваивания Component.state.property работает как шарм *. Ловушка заключается в том, что хранение реквизита в props.constructor.state дочерних элементов работает, когда вы работаете только с React.js, но этот механизм не работает для React-Redux, тогда вы должны оставить реквизиты вне любого назначения в props.constructor.state