タグ付けされた質問 「redux」

私はおそらく非常に明白な何かを見逃しているので、自分自身をクリアしたいと思います。 これが私の理解です。 ナイーブなreactコンポーネントには、states＆がありpropsます。で更新すると、コンポーネント全体stateがsetState再レンダリングされます。propsほとんどが読み取り専用であり、更新しても意味がありません。 のようなものを介してreduxストアにサブスクライブするreactコンポーネントでstore.subscribe(render)は、ストアが更新されるたびに明らかに再レンダリングされます。 react-reduxにはconnect()、状態ツリーの一部（コンポーネントに関係する）とactionCreatorsをコンポーネントに関して挿入するヘルパーがpropsあります。 const TodoListComponent = connect( mapStateToProps, mapDispatchToProps )(TodoList) しかし、ことを理解した上でsetState必要不可欠であるTodoListComponentReduxの状態ツリーの変更（再描画）に反応するように、私はすべてを見つけることができないstateかsetStateで関連するコードTodoListコンポーネントファイルを。これは次のようになります。 const TodoList = ({ todos, onTodoClick }) => ( <ul> {todos.map(todo => <Todo key={todo.id} {...todo} onClick={() => onTodoClick(todo.id)} /> )} </ul> ) 誰かが私が欠けているものに関して正しい方向に私を向けることができますか？ PS私はreduxパッケージにバンドルされているtodoリストの例に従っています。

86 reactjs  redux  react-redux 

Reactでは、状態はすぐには更新されないため、でコールバックを使用できますsetState(state, callback)。しかし、Reduxでそれを行う方法は？ を呼び出した後、this.props.dispatch(updateState(key, value))すぐに更新された状態で何かをする必要があります。 Reactで行うように、最新の状態でコールバックを呼び出す方法はありますか？

86 javascript  reactjs  redux 

Reduxアプリの初期状態は、次の2つの方法で設定できます。 2番目の引数としてcreateStore（docs link）に渡します それを最初の引数として（サブ）削減者に渡します（ドキュメントリンク） 初期状態をストアに渡す場合、ストアからその状態をどのように読み取り、それをレデューサーの最初の引数にしますか？

85 javascript  reactjs  redux 

GitHubリポジトリからクローンを作成したばかりのReduxアプリケーションを起動しようとしています。 次のコマンドで実行してみました npm start このエラーが発生します > react-redux@1.0.0 start /home/workspace/assignment > webpack-dev-server --config ./configs/webpack/webpack.config.development.js sh: 1: webpack-dev-server: not found npm ERR! file sh npm ERR! code ELIFECYCLE npm ERR! errno ENOENT npm ERR! syscall spawn npm ERR! react-redux@1.0.0 start: `webpack-dev-server --config ./configs/webpack/webpack.config.development.js` npm ERR! spawn ENOENT npm ERR! npm ERR! Failed …

85 javascript  reactjs  npm  redux  react-redux 

そのため、1週間前にReactの学習を開始しましたが、必然的に状態の問題と、コンポーネントがアプリの他の部分とどのように通信するかという問題に直面しました。探し回ったところ、Reduxが今月の味のようです。私はすべてのドキュメントを読みましたが、実際にはかなり革新的なアイデアだと思います。これが私の考えです： 州は一般的にかなり邪悪であり、プログラミングのバグの大きな原因であることに同意しています。アプリ全体に分散させるのではなく、Reduxは、変更するアクションを発行する必要があるグローバル状態ツリーにすべてを集中させないのはなぜですか？面白そう。すべてのプログラムには状態が必要なので、1つの不純なスペースに貼り付け、そこからのみ変更して、バグを簡単に追跡できるようにします。次に、個々の状態の断片をReactコンポーネントに宣言的にバインドし、それらを自動再描画させることもできます。すべてが美しいです。 ただし、このデザイン全体について2つの質問があります。まず、状態ツリーが不変である必要があるのはなぜですか？タイムトラベルのデバッグやホットリロードは気にせず、アプリに元に戻す/やり直しをすでに実装しているとします。これをしなければならないのはとても面倒に思えます： case COMPLETE_TODO: return [ ...state.slice(0, action.index), Object.assign({}, state[action.index], { completed: true }), ...state.slice(action.index + 1) ]; これの代わりに： case COMPLETE_TODO: state[action.index].completed = true; 言うまでもなく、私は学ぶためだけにオンラインホワイトボードを作成しています。すべての状態変更は、コマンドリストにブラシストロークを追加するのと同じくらい簡単かもしれません。しばらくすると（数百のブラシストローク）、このアレイ全体を複製すると、非常に費用と時間がかかるようになる可能性があります。 アクションを介して変更されるUIから独立したグローバル状態ツリーで問題ありませんが、本当に不変である必要がありますか？このような単純な実装（非常にラフなドラフト。1分で記述）の何が問題になっていますか？ var store = { items: [] }; export function getState() { return store; } export function addTodo(text) { store.items.push({ "text": text, "completed", false}); …

84 javascript  reactjs  state  immutability  redux 

reduxとの非同期を学ぶための簡単なアプリを作っているだけです。すべてが機能するようになりました。今は、実際の状態をWebページに表示したいだけです。では、renderメソッドで実際にストアの状態にアクセスするにはどうすればよいですか？ これが私のコードです（私は学習しているだけなので、すべてが1ページにあります）： const initialState = { fetching: false, fetched: false, items: [], error: null } const reducer = (state=initialState, action) => { switch (action.type) { case "REQUEST_PENDING": { return {...state, fetching: true}; } case "REQUEST_FULFILLED": { return { ...state, fetching: false, fetched: true, items: action.payload } } case "REQUEST_REJECTED": { …

83 javascript  asynchronous  reactjs  redux  react-redux 

React NativeNavigatorコンポーネント内に作成されたreact-reduxコンテナコンポーネントがあります。ナビゲーターを小道具としてこのコンテナーコンポーネントに渡して、プレゼンテーションコンポーネント内でボタンを押した後、オブジェクトをナビゲータースタックにプッシュできるようにしたいと思います。 私は、react-reduxコンテナコンポーネントが提供するすべての定型コードを手書きする必要なしにこれを実行したいと思います（また、react-reduxがここでも提供するすべての最適化を見逃さないでください）。 コンテナコンポーネントコードの例： const mapStateToProps = (state) => { return { prop1: state.prop1, prop2: state.prop2 } } const mapDispatchToProps = (dispatch) => { return { onSearchPressed: (e) => { dispatch(submitSearch(navigator)) // This is where I want to use the injected navigator } } } const SearchViewContainer = connect( mapStateToProps, …

82 reactjs  react-native  redux  react-redux 

これは公式のReduxドキュメントの一部です： これは、渡す関数のタイプであるため、レデューサーと呼ばれます。 Array.prototype.reduce(reducer, ?initialValue) それは私にはあまり意味がありません。なぜ彼らが実際にレデューサーと呼ばれるのか誰かが私に説明できますか？それらがデフォルト値を返す（またはデフォルトの引数値を持っている）という事実は、それらをレデューサーIMHOにしません。

82 javascript  redux 

私は次のような2つの定義を通過しました： 純粋な関数とは、入力を変更しようとせず、常に同じ入力に対して同じ結果を返す関数です。 例 function sum(a, b) { return a + b; } そして不純関数はそれ自身の入力を変更するものです。 例 function withdraw(account, amount) { account.total -= amount; } ReactJの公式ドキュメントから取得した定義とコードスニペット。 純粋な関数が必要な場所で不純な関数を使用するために、React / Reduxでいくつかの間違いをする方法を教えてください。

12 javascript  reactjs  redux 

React-Reduxでのエラー処理のより一般的な方法または正しい方法を理解したいと思います。 電話番号登録コンポーネントがあるとします。 そのコンポーネントは、入力された電話番号が無効である場合にエラーをスローします そのエラーを処理する最良の方法は何でしょうか？ アイデア1： エラーを受け取り、エラーが渡されるたびにアクションをディスパッチするコンポーネントを作成する アイデア2： エラーはそのコンポーネントに関連しているため、そのエラーをコンポーネントに渡します（コンポーネントはreduxに接続されていません。つまり、エラーハンドラーコンポーネントはアクションをディスパッチしません）。 質問：誰かがReact-Reduxでの大規模アプリのエラー処理の適切な方法について私を案内してくれませんか？

11 reactjs  redux 

React-Reduxの新機能を使用するように新しいreact-reduxアプリケーションを構成しようとしています。公式ドキュメントは言います React Reduxは現在、既存のconnect（）高次コンポーネントの代わりとして一連のフックAPIを提供しています。 私はいくつかの実際の例でHooks APIに関連するいくつかのヘルプ記事を見つけようとしましたが、すべてのreact-reduxアプリは接続機能を使用しています。公式ドキュメントにも非常に基本的な例が示されています。 アプリの接続機能をuseSelector（Hooks APIによって提供される）で変更したい。 これが私のアプリケーションのコードスニペットの例です。 //MessagesListContainer export default connect( // mapStateToProps (state:State) => ({ activeUser: getActiveUser(state), messages: getMessagesList(state), }) )(MessagesList) //Selectors export const getActiveUser = (state: State) => state.activeUser; export const getMessagesList = (state : State) => ( Object.keys(state.messages).map((key : any)=> state.messages[key]) ) export interface IMessagesListProps { …

9 reactjs  typescript  redux  react-redux