reduxのコンポーネントにアクションを渡す方法

Question

コンポーネント内でアクションを実行したいですか？これはプレゼンテーションコンポーネントであり、還元を意識する必要はありません。ルータの実装は、react-router-reduxを使用して実行されます。

main.js：

let store = createStore(rootReducer) 

const history = syncHistoryWithStore(hashHistory, store) 

class RenderClass extends Component { 
    render() { 
    return (
     <Provider store={store}> 
      <Router history={history}> 
       <Route path="/" component={MainLayout}> 
        <Route name="employees" path="/employees" url="http://localhost:8080/" component={EmployeeTable}></Route> 
        <Route name="personalInformation" path="/personalInformation/:employeeId" url={URI} component={PersonalInformation} /> 
        ..... 
       </Route> 
      <Router> 
     </Provider> 
     ); 
    } 
} 

App.jsx：

import * as Actions from './action-creator'; 
const MainLayout = React.createClass({ 
       render: function() { 

        const { dispatch, list } = this.props; 
        let actions = bindActionCreators(Actions, dispatch); 
        console.log(actions); 

        return (
         <div className="wrapper"> 
          <Header actions={actions} list={list} params={this.props.params} /> 

        {React.cloneElement(this.props.children, this.props)} 
         </div> 
        ) 
       } 
      }); 

function select(state) { 
    return { 
     list: state.listingReducer 
    } 
} 
export default connect(select)(MainLayout); 

header.js：

define(
    [ 
     'react', 
     'jquery', 
     'appMin' 
    ], 
    function (React, $) { 
     var Link = require('reactRouter').Link; 
     var Header = React.createClass({ 
      handleClick: function() { 
       //Action called here 
       this.props.actions.listEmployees(); 
      },  
      render: function() { 
       return (
        <ul className="sidebar-menu"> 
         <li> 
          <Link to={'/employees'} onClick={this.handleClick}><i className="fa fa-home"></i>Employees</Link> 
         </li> 
        </ul> 
       ); 
      } 
     }); 
     return Header; 
    } 
) 

employee.js：

define(
    [ 
     'react', 
     'jquery', 
     'appMin' 
    ], 
    function (React, $) { 
     var EmployeeTable = React.createClass({ 

      render: function() { 
       if (this.props.list != undefined) { 
        var listItems = this.props.list.map(function (listItem) { 
         return (
          <tr key={listItem.id}> 
           <td> {listItem.name}</td> 
       <td><Link to={'/personalInformation/' + employee.id} onClick={this.props.actions.displayPersonalInformation(employee.id)}>Personal Information</Link></td> 
           ...... 
          </tr> 
         ); 
        }, this); 
        }) 
       } 
       return (
        <table> 
         <tbody> 
          {listItems} 
         </tbody>      
        </table> 
       ); 
      } 
     }) 
    } 
) 

アクションcreator.js：

export function listEmployees() { 
    return { 
     type: types.LIST_EMPLOYEES 
    }; 
} 

export function displayPersonalInformation() { 
     return { 
      type: types.DISPLAY_PERSONAL_INFORMATION 
     }; 
    } 

reducer.js: 
function addEmployee(state, action) { 

    switch (action.type) { 

     case types.LIST_EMPLOYEES: 
     return {"id":"1", "name":"Stackoverflow"} 

     default: 
     return state 
    } 
} 

function listingReducer(state = [], action) { 
    switch (action.type) { 

     case types.LIST_EMPLOYEES: 
      return [ 
       ...state, 
       addEmployee(undefined, action) 
      ] 

     case types.DISPLAY_PERSONAL_INFORMATION: 
       return // Gets personal Information 

     default: 
      return state; 
    } 
} 


const rootReducer = combineReducers({ 
    listingReducer 
}) 

export default rootReducer 

私は小道具にそれを縛られていないので、小道具、アクションは含まれません。

function mapStateToProps(state) { 
    return { 
     list: state.list 
    } 
} 

function mapDispatchToProps(dispatch) { 
    return { actions: bindActionCreators({ actionCreators }, dispatch) } 
} 

輸出のデフォルトは は私が派遣を得ている機能のエラーではありません（mapStateToProps、mapDispatchToProps）（MainLayout）を接続します。下図のように私はApp.jsにmapStateToPropsとmapDispatchToPropsを書いてみました。エラー文は実際にはstackoverflowの重複した質問のように聞こえるが、mapDispatchToPropsを使用している理由もわかっている。前もって感謝します。

Answer 1

export default connect(mapStateToProps, mapDispatchToProps)(MainLayout)を使用しており、dispatchをMainLayoutにコールしようとしていることがわかっているからです。反応-Reduxのドキュメントからそう

あなたは、次の方法で接続して呼び出すことができます参照している場合： -

• connect()(//Component) - >発送は
• connect(mapStateToProps)(//Component)小道具として渡される - は、発送が渡されます>小道具として
connect(mapStateToProps,mapDispatchToProps)(//Component)
• - >発送はあなたのコンポーネントに小道具として渡すことはないでしょう

シナリオ3では、mapDispatchToPropsが既にディスパッチ機能にアクセスできるため、動作がこのようになります。したがって、関数をバインドしてmapDispatchToPropsにディスパッチし、この関数をコンポーネントに渡すことができます。

例

あなたが派遣したい機能がdispatchMe()とdispatchActionというアクションを呼び出すdispatchMe2()あります。

function mapDispatchToProps(dispatch){ 
    return { 
    dispatchMe :() => { 
     dispatch(dispatchAction()) 
    }, 
    dispatchMe2 :() => { 
     dispatch(dispatchAction2()) 
    } 
    } 
} 

今すぐあなたのコンポーネントにあなたが dispatchMeを渡し、必要なときにそれを呼び出すことができます - ：だからあなたの mapDispatchToPropsは次のようになります。あなたがあなたのケースでは、アクションの作成者すなわち displayPersonalInformationを呼び出すたびにアクションを dispatchう bindActionCreators、 reduxを使用しておりますので

あなたはこの

Answer 2

詳細はhereを読むことができます。

@Harkirat Salujaさんが答えたところでは、mapDispatchToPropsを使用した場合、コンポーネントにはpropsというバインドされたdispatch機能がありません。

しかし、まだあなたがprops（ないのベストプラクティス）とdispatchを持つようにしたい場合は、その後、あなたは何かなどを持つことができ、

function mapDispatchToProps(dispatch) { 
    return { dispatch, ...actions: bindActionCreators({ actionCreators }, dispatch) } 
} 

Answer 3

class MainLayout extends React.component{ 
     render(){ 
     console.log(this.props.list); 
     return(
      <div> 
       <h1>mainlayout</h1> 
      </div> 
      ); 
     } 
    } 
    function mapStateToProps(state) { 
     return { 
      list: state.listingReducer 
     } 
    } 
    export default connect(mapStateToProps)(MainLayout);